calenstyle
Version:
CalenStyle is a Responsive Drag-and-Drop Event Calendar for Web, iOS, Android & Windows. CalenStyle is customizable plugin having multiple, clean-designed event calendar templates specially designed for web & mobile applications.
638 lines (633 loc) • 150 kB
JavaScript
/* -----------------------------------------------------------------------------
CalenStyle - Responsive Event Calendar
Version 2.0.8
Copyright (c)2017 Lajpat Shah
Contributors : https://github.com/nehakadam/CalenStyle/contributors
Repository : https://github.com/nehakadam/CalenStyle
Homepage : https://nehakadam.github.io/CalenStyle
----------------------------------------------------------------------------- */
var documentation = {
tags:
[
"Basic",
"UI",
"i18n",
"DateTime",
"Events",
"DetailedMonthView",
"MonthView",
"DetailView",
"Week",
"CustomView",
"AgendaView",
"WeekPlannerView",
"QuickAgendaView",
"TaskPlannerView",
"DayListView",
"AppointmentView",
"EventList",
"FilterBar",
"Data",
"DatePicker"
],
parameters:
[
{
"name": "sectionsList",
"tags": ["UI"],
"default": "[\"Header\", \"Calendar\"]",
"datatype": "Array",
"options": "<ul>\n <li>\"Header\"</li>\n <li>\"Calendar\"</li>\n <li>\"EventList\"</li>\n <li>\"FilterBar\"</li>\n <li>\"ActionBar\"</li>\n</ul>",
"description": "<p>\n <code>sectionsList</code> is the array of sections to add to the Calendar View.\n</p>\n<p>\n <code>\"Calendar\"</code> is one of the default value and is required for all Calendar Views.\n</p>",
"examples": ["../demo/QuickUse-WidthBasedRendering.htm"]
},
{
"name": "language",
"tags": ["i18n"],
"default": "",
"datatype": "String",
"options": "",
"description": "<p>\n <code>language</code> can be any language for which i18n strings are specified in \"calenstyle-i18n.js\".\n For example, \"en\", \"de\"\n</p>",
"examples": ["../demo/Other-Internationalization.htm"]
},
{
"name": "veryShortDayNames",
"tags": ["i18n"],
"default": "[\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"]",
"datatype": "Array",
"options": "",
"description": "<p><code>veryShortDayNames</code> is an array of Very Short Day Names from Sunday to Saturday.</p><p><code>veryShortDayNames</code> are used in a DatePicker.</p>"
},
{
"name": "shortDayNames",
"tags": ["i18n"],
"default": "[\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"]",
"datatype": "Array",
"options": "",
"description": "<p><code>shortDayNames</code> is an array of Short Day Names from Sunday to Saturday.</p>",
"examples": ["../demo/QuickUse-Default_DatePicker_EventList.htm"]
},
{
"name": "fullDayNames",
"tags": ["i18n"],
"default": "[\"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\"]",
"datatype": "Array",
"options": "",
"description": "<p><code>fullDayNames</code> is an array of Full Day Names from Sunday to Saturday.</p>"
},
{
"name": "shortMonthNames",
"tags": ["i18n"],
"default": "[\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]",
"datatype": "Array",
"options": "",
"description": "<p><code>shortMonthNames</code> is an array of Short Month Names from January to December.</p>"
},
{
"name": "fullMonthNames",
"tags": ["i18n"],
"default": "[\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"]",
"datatype": "Array",
"options": "",
"description": "<p><code>fullMonthNames</code> is an array of Full Month Names from January to December.</p>",
"examples": ["../demo/QuickUse-Default_DatePicker_EventList.htm"]
},
{
"name": "numbers",
"tags": ["i18n"],
"default": "[\"0\", \"1\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\"]",
"options": "",
"description": "<p>\n <code>numbers</code> is an array numbers from 0 to 9 which will be used to display numeric values.\n</p>"
},
{
"name": "eventTooltipContent",
"tags": ["i18n"],
"default": "\"Default\"",
"datatype": "<ul>\n <li>string or html code string</li>\n <li>callback function returning string or html code string</li>\n</ul>",
"options": "<ul>\n <li>\"Default\"</li>\n <li>\n<pre>\nfunction(oEventRecord)\n{\n return \"tooltipcontent\";\n}\n</pre>\n </li>\n</ul>",
"description": "<p>\n <code>eventTooltipContent</code> is a content displayed on tooltip.\n</p>"
},
{
"name": "formatDates",
"tags": ["i18n"],
"default": "<pre>{}</pre>",
"datatype": "Object",
"options": "",
"description": "<p>\n <code>formatDates</code> can be used to apply a custom datetime format.\n</p>\n<p>\n It can be specified as an object with callback functions returning formatted datetime string named as format specifier. \n</p>",
"examples": ["../demo/Callback-CellClicked_AddEvent.htm"]
},
{
"name": "slotTooltipContent",
"tags": ["i18n"],
"default": "function(oSlotAvailability)\n{\n if(oSlotAvailability.status === \"Busy\")\n return \"\";\n else if(oSlotAvailability.status === \"Free\")\n {\n if(oSlotAvailability.count === undefined || oSlotAvailability.count === null)\n return \"<div class=cavTooltipBookNow>Book Now</div>\";\n else\n return \"<div class=cavTooltipSlotCount>\" + oSlotAvailability.count + \" slots available</div><div class=cavTooltipBookNow>Book Now</div>\";\n }\t\t\t\n}",
"datatype": "String or Function returning String",
"options": "",
"description": "<p>Tooltip content for time slot in the AppointmentView.</p>"
},
{
"name": "miscStrings",
"tags": ["i18n"],
"default": "<pre>miscStrings:\n{\n today: \"Today\",\n week: \"Week\",\n allDay: \"All Day\",\n ends: \"Ends\",\n emptyEventTitle: \"(No Title)\",\n emptyGoogleCalendarEventTitle: \"Busy\"\n}</pre>",
"datatype": "Object",
"options": "",
"description": "<p>\n <code>miscStrings</code> is an object containing strings displayed on CalenStyle UI which can be customized\n</p>"
},
{
"name": "duration",
"tags": ["i18n"],
"default": "\"Default\"",
"datatype": "<ul>\n <li>string or html code string</li>\n <li>callback function returning string or html code string</li>\n</ul>",
"options": "<ul>\n <li>\"Default\"</li>\n <li>\n <pre>\nfunction(dStartDate, dEndDate, sDurationUnits)\n{\n return iDuration + sOutputDurationUnit; // 2d or 1d 8h 45m\n}\n </pre>\n </li>\n</ul>",
"description": "<p>\n To customize duration strings use <code>duration</code> as a callback function.\n</p>\n<p>\n This function is called with parameters start date, end date and duration units(any combination of 'y', 'M', 'w', 'd', 'h', 'm', 's', but only 'd', 'dhm' is used in CalenStyle). So you can calculate duration between specified dates and return duration string. \n</p>"
},
{
"name": "durationStrings",
"tags": ["i18n"],
"default": "<pre>{\n y: [\"year \", \"years \"],\n M: [\"month \", \"months \"],\n w: [\"w \", \"w \"],\n d: [\"d \", \"d \"],\n h: [\"h \", \"h \"],\n m: [\"m \", \"m \"],\n s: [\"s \", \"s \"]\n}</pre>",
"datatype": "Object",
"options": "",
"description": "<p>\n Custom duration unit strings can be specified to replace default duration unit strings displayed on CalenStyle UI.\n</p>"
},
{
"name": "viewsToDisplay",
"tags": ["UI"],
"default": "<pre>[{\n \"viewName\": \"DetailedMonthView\",\n \"viewDisplayName\": \"Month\"\n},\n{\n \"viewName\": \"WeekView\",\n \"viewDisplayName\": \"Week\"\n},\n{\n \"viewName\": \"DayView\",\n \"viewDisplayName\": \"Day\"\n}]</pre>",
"datatype": "Array",
"options": "",
"description": "<p>\n <code>viewsToDisplay</code> is an array of views available to be displayed on the Calendar View. A view specified in the array will be added as a menu item in the Header section. A view specified as <a class=\"parameter-link icon-link\" href=\"#link-visibleView\"><code>visibleView</code></a> will be displayed first. You can switch between Views by selecting menu item. </p>\n<p>\n <code>\"viewName\"</code> - name of the View (refer <a class=\"parameter-link icon-link\" href=\"#link-visibleView\"><code>visibleView</code></a> options).\n</p>\n<p>\n <code>\"viewDisplayName\"</code> - name to display on menu item.\n</p>",
"examples": ["../demo/QuickUse-WidthBasedRendering.htm"]
},
{
"name": "visibleView",
"tags": ["UI"],
"default": "\"DetailedMonthView\"",
"datatype": "String",
"options": "<ul>\n <li>\"DetailedMonthView\"</li>\n <li>\"MonthView\"</li>\n <li>\"WeekView\"</li>\n <li>\"DayView\"</li>\n <li>\"AgendaView\"</li>\n <li>\"WeekPlannerView\"</li>\n <li>\"QuickAgendaView\"</li>\n <li>\"TaskPlannerView\"</li>\n <li>\"CustomView\"</li>\n <li>\"DayEventListView\"</li>\n <li>\"DayEventDetailView\"</li>\n <li>\"AppointmentView\"</li>\n <li>\"DatePicker\"</li>\n</ul>",
"description": "<p><code>visibleView</code> is the Calendar View you want to display.</p>",
"examples": ["../demo/QuickUse-WidthBasedRendering.htm"]
},
{
"name": "selectedDate",
"tags": ["Basic"],
"default": "new Date()",
"datatype": "Date",
"options": "",
"description": "<p><code>selectedDate</code> is the Date for which the Calendar View is rendered.</p><p>Today is the default value of <code>selectedDate</code>.",
"examples": ["../demo/QuickUse-Default_DatePicker_EventList.htm"]
},
{
"name": "headerComponents",
"tags": ["Basic", "UI"],
"default": "<pre>\n{\n DatePickerIcon: \"<span class='cContHeaderDatePickerIcon clickableLink icon-Calendar'></span>\",\n FullscreenButton: function(bIsFullscreen)\n {\n var sIconClass = (bIsFullscreen) ? \"icon-Contract\" : \"icon-Expand\";\n return \"<span class='cContHeaderFullscreen clickableLink \"+ sIconClass +\"'></span>\";\n },\n PreviousButton: \"<span class='cContHeaderButton cContHeaderNavButton cContHeaderPrevButton clickableLink icon-Prev'></span>\",\n NextButton: \"<span class='cContHeaderButton cContHeaderNavButton cContHeaderNextButton clickableLink icon-Next'></span>\",\n TodayButton: \"<span class='cContHeaderButton cContHeaderToday clickableLink'></span>\",\n HeaderLabel: \"<span class='cContHeaderLabelOuter'><span class='cContHeaderLabel'></span></span>\",\n HeaderLabelWithDropdownMenuArrow: \"<span class='cContHeaderLabelOuter clickableLink'><span class='cContHeaderLabel'></span><span class='cContHeaderDropdownMenuArrow'></span></span>\",\n MenuSegmentedTab: \"<span class='cContHeaderMenuSegmentedTab'></span>\",\n MenuDropdownIcon: \"<span class='cContHeaderMenuButton clickableLink'>☰</span>\"\n}\n</pre>",
"datatype": "Object",
"options": "",
"description": "<p><code>headerComponents</code> is a set of components which can be added in Header Sections.</p>\n<p>The value of each component is a string of HTML markup or function returning a string of HTML markup.</p>\n<p>Header Component Views - </p>\n<div class=\"ss-header ss-headercomp1\">\n <img src=\"images/headerComponents1.png\">\n</div>\n<div class=\"ss-header ss-headercomp2\">\n <img src=\"images/headerComponents2.png\">\n</div>\n<div class=\"ss-header ss-headercomp3\">\n <img src=\"images/headerComponents3.png\">\n</div>\n<div class=\"ss-header ss-headercomp4\">\n <img src=\"images/headerComponents4.png\">\n</div>\n<ul>\n\t<li>\n \"DatePickerIcon\" - Show \"DatePicker\".\n \t</li>\n \t<li>\n \"FullscreenButton\" - Expand/Contract CalenStyle view.\n \t</li> \n \t<li>\n \"PreviousButton\" - Navigate to View displaying previous set of dates .\n \t</li> \n \t<li>\n \"NextButton\" - Navigate to View displaying next set of dates .\n \t</li>\n \t<li>\n \"TodayButton\" - Navigate to View displaying Today.\n \t</li>\n \t<li>\n \"HeaderLabel\" - Display Label.\n \t</li> \n \t<li>\n \"HeaderLabelWithDropdownMenuArrow\" - Display Label which shows Dropdown Menu when clicked. Elements to be added in the dropdown menu can be configured in <a class=\"parameter-link icon-link\" href=\"#link-dropdownMenuElements\"><code>dropdownMenuElements</code></a> parameter.\n \t</li> \n \t<li>\n \"MenuSegmentedTab\" - Show Segmented Tab Menu.\n \t</li>\n \t<li>\n \"MenuDropdownIcon\" - Show Dropdown Menu. Elements to be added in the dropdown menu can be configured in <a class=\"parameter-link icon-link\" href=\"#link-dropdownMenuElements\"><code>dropdownMenuElements</code></a> parameter.\n \t</li>\n</ul>"
},
{
"name": "headerSectionsList",
"tags": ["Basic", "UI"],
"default": "<pre>\n{\n left: [\"DatePickerIcon\", \"FullscreenButton\", \"PreviousButton\", \"NextButton\"],\n center: [\"HeaderLabel\"],\n right: [\"MenuSegmentedTab\"]\n}\n</pre>",
"datatype": "Object",
"options": "<ul>\n <li>\"DatePickerIcon\"</li>\n <li>\"FullscreenButton\"</li>\n <li>\"PreviousButton\"</li>\n <li>\"NextButton\"</li>\n <li>\"TodayButton\"</li>\n <li>\"HeaderLabel\"</li>\n <li>\"HeaderLabelWithDropdownMenuArrow\"</li>\n <li>\"MenuSegmentedTab\"</li>\n <li>\"MenuDropdownIcon\"</li>\n</ul>\n",
"description": "<p>Header is divided into three sections - <code>left</code>, <code>center</code> and <code>right</code>.</p>\n<p><code>headerSectionList</code> defines an array of components to include in each Header Section. Youn can customize Header as per visual and functional requirements.</p>",
"examples": ["../demo/QuickUse-Default_DatePicker_EventList.htm"]
},
{
"name": "dropdownMenuElements",
"tags": ["Basic", "UI", "DatePicker"],
"default": "[\"ViewsToDisplay\"]",
"datatype": "Array",
"options": "<ul>\n <li>\"ViewsToDisplay\"</li>\n <li>\"DatePicker\"</li>\n</ul>\n",
"description": "<p>The Menu Items to display are specified in <code>dropdownMenuElements</code>.</p>\n<p>\"ViewsToDisplay\" adds menu items as \"viewDisplayName\" from <a class=\"parameter-link icon-link\" href=\"#link-viewsToDisplay\"><code>viewsToDisplay</code></a>.</p>\n<p>\"DatePicker\" adds menu item as \"Date Picker\".</p>",
"examples": ["../demo/Mobile/View-Detail_Custom_Days.htm"]
},
{
"name": "parentObject",
"tags": ["Basic", "DatePicker"],
"default": "null",
"datatype": "Object",
"options": "",
"description": "<p><code>parentObject</code> is the CalenStyle object for which DatePicker is created.</p>\n<p>A value for this property is set only for the CalenStyle object which is used as a DatePicker. <code>parentObject</code> along with <code>datePickerCalDataSource.config.sourceCountType</code>: \"Event\" is used for calculating Source Count from the eventSource of the Parent CalenStyle object.</p>\n",
"examples": ["../demo/Section-Header_NonCalenStyle.htm"]
},
{
"name": "datePickerObject",
"tags": ["Basic", "DatePicker"],
"default": "null",
"datatype": "Object",
"options": "",
"description": "<p><code>datePickerObject</code> is the CalenStyle object of the DatePicker.</p>\n<p>A value of this parameter is used to modify DatePicker when some changes takes place in the parent CalenStyle object. For example, on view navigation, <code>highlightDatesInDatePicker</code> method is called on <code>datePickerObject</code>.</p>\n"
},
{
"name": "formatSeparatorDateTime",
"tags": ["DateTime"],
"default": "Space(\" \")",
"datatype": "Character",
"options": "",
"description": "<p>\n <code>formatSeparatorDateTime</code> is the DateTime Format Separator. (* values of formatSeparatorDateTime, formatSeparatorDate and formatSeparatorTime should be different).\n</p>\n<p>\n When a Custom <a class=\"parameter-link icon-link\" href=\"#link-inputDateTimeFormat\"><code>inputDateTimeFormat</code></a> (other than \"Milliseconds\" and \"ISO8601\") is used and <code>formatSeparatorDateTime</code> for the calDataSource is different than one specified in the Settings Parameters, <code>formatSeparatorDateTime</code> can be specified in the <a class=\"parameter-link icon-link\" href=\"#link-calDataSource\"><code>calDataSource</code></a> to facilitate Date Parsing. Otherwise Date Parsing will fail.\n</p>",
"examples": ["../demo/Callback-CellClicked_AddEvent.htm"]
},
{
"name": "formatSeparatorDate",
"tags": ["DateTime"],
"default": "Dash(\"-\")",
"datatype": "Character",
"options": "",
"description": "<p>\n <code>formatSeparatorDate</code> is the Date Format Separator. (* values of formatSeparatorDateTime, formatSeparatorDate and formatSeparatorTime should be different).\n</p>\n<p>\n When a Custom <a class=\"parameter-link icon-link\" href=\"#link-inputDateTimeFormat\"><code>inputDateTimeFormat</code></a> (other than \"Milliseconds\" and \"ISO8601\") is used and <code>formatSeparatorDate</code> for the calDataSource is different than one specified in the Settings Parameters, <code>formatSeparatorDate</code> can be specified in the <a class=\"parameter-link icon-link\" href=\"#link-calDataSource\"><code>calDataSource</code></a> to facilitate Date Parsing. Otherwise Date Parsing will fail.\n</p>",
"examples": ["../demo/Callback-CellClicked_AddEvent.htm"]
},
{
"name": "formatSeparatorTime",
"tags": ["DateTime"],
"default": "Colon(\":\")",
"datatype": "Character",
"options": "",
"description": "<p>\n <code>formatSeparatorTime</code> is the Time Format Separator. (* values of formatSeparatorDateTime, formatSeparatorDate and formatSeparatorTime should be different).\n</p>\n<p>\n <code>formatSeparatorTime</code> can be specified in the <a class=\"parameter-link icon-link\" href=\"#link-calDataSource\"><code>calDataSource</code></a>, when a Custom <a class=\"parameter-link icon-link\" href=\"#link-inputDateTimeFormat\"><code>inputDateTimeFormat</code></a> (other than \"Milliseconds\" and \"ISO8601\") is used and <code>formatSeparatorTime</code> for the calDataSource is different than one specified in as Settings Parameters Option to facilitate Date Parsing. Otherwise Date Parsing will fail.\n</p>",
"examples": ["../demo/Callback-CellClicked_AddEvent.htm"]
},
{
"name": "is24Hour",
"tags": ["DateTime"],
"default": "true",
"datatype": "Boolean",
"options": "<ul>\n <li>true</li>\n <li>false</li>\n</ul>",
"description": "<p><code>is24Hour</code> specifies the time format in which the time is displayed inside the Calendar View.</p>",
"examples": ["../demo/View-QuickAgenda.htm"]
},
{
"name": "inputDateTimeFormat",
"tags": ["DateTime"],
"default": "\"dd-MM-yyyy HH:mm:ss\"",
"datatype": "String",
"options": "<ul>\n <li>\"Milliseconds\"</li>\n <li>\"ISO8601\"</li>\n <li>\"dd-MM-yyyy hh:mm:ss AA\"</li>\n <li>\"dd-MM-yyyy HH:mm:ss\"</li>\n <li>\"MM-dd-yyyy hh:mm:ss AA\"</li>\n <li>\"MM-dd-yyyy HH:mm:ss\"</li>\n <li>\"yyyy-MM-dd hh:mm:ss AA\"</li>\n <li>\"yyyy-MM-dd HH:mm:ss\"</li>\n</ul>",
"description": "<p>\n <code>inputDateTimeFormat</code> is the DateTime Format specified in the Events.\n</p>\n<p>\n When <code>inputDateTimeFormat</code> for the eventSource is different than one specified in the Settings Parameters, <code>inputDateTimeFormat</code> can be specified in the <a class=\"parameter-link icon-link\" href=\"#link-calDataSource\"><code>calDataSource</code></a> to facilitate Date Parsing. Otherwise Date Parsing will fail.\n</p>"
},
{
"name": "eventDuration",
"tags": ["DateTime"],
"default": "30",
"datatype": "Integer",
"options": "",
"description": "<p>\n <code>eventDuration</code> indicates default event duration, which can be used to create end date of event for which end date is not supplied in the event source.\n</p>"
},
{
"name": "allDayEventDuration",
"tags": ["DateTime"],
"default": "1",
"datatype": "Integer",
"options": "",
"description": "<p>\n <code>allDayEventDuration</code> indicates default event duration for all day event, which can be used to create end date of event for which end date is not supplied in the event source.\n</p>"
},
{
"name": "timeIndicatorUpdationInterval",
"tags": ["UI"],
"default": "10",
"datatype": "Integer",
"options": "",
"description": "<p>\n <code>timeIndicatorUpdationInterval</code> is an interval after which Current Time Indicator position is auto updated to indicate Current Time. Time Indicator is displayed in Detail Views(\"WeekView\", \"DayView\") in the column indicating timeLabels and the column for Today . <code>timeIndicatorUpdationInterval</code> is specified in minutes.\n</p>"
},
{
"name": "unitTimeInterval",
"tags": ["UI", "Events"],
"default": "30",
"datatype": "Integer",
"options": "<ul>\n <li>60</li>\n <li>30</li>\n <li>20</li>\n <li>15</li>\n <li>10</li>\n <li>5</li>\n</ul>",
"description": "<p>\n <code>unitTimeInterval</code> is a value of a time slot(one row) in the Detail Views(\"WeekView\", \"DayView\"). <code>unitTimeInterval</code> is specified in minutes.\n</p>"
},
{
"name": "timeLabels",
"tags": ["UI"],
"default": "\"Hour\"",
"datatype": "String",
"options": "<ul><li>\"Hour\"</li><li>\"All\"</li></ul>",
"description": "<p><code>timeLabels</code> sets whether to display time labels (for example, 01:00) for Hour or time labels for Each Time Slot in the Detail Views(\"WeekView\", \"DayView\").</p>"
},
{
"name": "inputTZOffset",
"tags": ["DateTime", "Events"],
"default": "\"+05:30\"",
"datatype": "TZD(Time Zone Designator) String",
"options": "",
"description": "<p>\n <code>inputTZOffset</code> is the TZD string of timezone in which input dates from data sources is specified. For example. values of \"start\" and \"end\" for Event.\n</p>\n<p>\n <code>outputTZOffset</code> is the TZD string of timezone in which you want to display dates on CalenStyle UI.\n</p>\n<p>\n You can specify <code>inputTZOffset</code> for each data source separately in <code>\"config\"</code> object of <code>calDataSource</code>.\n</p>\n<p>\n While parsing data, dates in <code>inputTZOffset</code> will be offset to <code>outputTZOffset</code>.\n This will let you to display dates in different offsets\n</p>\n<p>\n If you set <code>inputTZOffset</code> to \"\"(empty string), timezone offset of browser will be used.\n</p>",
"examples": ["../demo/View-Detail_Week.htm", "../demo/Callback-CellClicked_AddEvent.htm"]
},
{
"name": "tz",
"tags": ["DateTime", "Events"],
"default": "\"Asia/Calcutta\"",
"datatype": "TZ String",
"options": "",
"description": "<p>\n <code>timezone</code> value will be used when you specify Google Calendar as a source, to send it as a Query Parameter.\n</p>",
"examples": ["../demo/Other-Internationalization.htm"]
},
{
"name": "outputTZOffset",
"tags": ["DateTime", "Events"],
"default": "\"+05:30\"",
"datatype": "TZD(Time Zone Designator) String",
"options": "",
"description": "<p>\n <code>inputTZOffset</code> is the TZD string of timezone in which input dates from data sources is specified. For example. values of \"start\" and \"end\" for Event.\n</p>\n<p>\n <code>outputTZOffset</code> is the TZD string of timezone in which you want to display dates on CalenStyle UI.\n</p>\n<p>\n You can specify <code>inputTZOffset</code> for each data source separately in <code>\"config\"</code> object of <code>calDataSource</code>.\n</p>\n<p>\n While parsing data, dates in <code>inputTZOffset</code> will be offset to <code>outputTZOffset</code>.\n This will let you to display dates in different offsets\n</p>\n<p>\n If you set <code>inputTZOffset</code> to \"\"(empty string), timezone offset of browser will be used.\n</p>",
"examples": ["../demo/Other-Internationalization.htm"]
},
{
"name": "weekStartDay",
"tags": ["Basic"],
"default": "1",
"datatype": "Integer",
"options": "0 - 7 (Sunday - Saturday)",
"description": "<p><code>weekStartDay</code> is Start Day of the week.</p>"
},
{
"name": "weekNumCalculation",
"tags": ["Basic", "Week"],
"default": "\"US\"",
"datatype": "String",
"options": "<ul>\n <li>\"US\"</li>\n <li>\"Europe/ISO\"</li>\n</ul>",
"description": "<p>\n <code>weekNumCalculation</code> specifies Week Number Calculation Method - \"US\" or \"Europe/ISO\".\n</p>"
},
{
"name": "daysInCustomView",
"tags": ["UI", "CustomView"],
"default": "4",
"datatype": "Integer",
"options": "",
"description": "<p><code>daysInCustomView</code> is a value of Number of Days To Display in DetailView.</p>",
"examples": ["../demo/View-Detail_Custom_Days.htm"]
},
{
"name": "daysInDayListView",
"tags": ["UI", "DayListView"],
"default": "7",
"datatype": "Integer",
"options": "",
"description": "<p><code>daysInDayListView</code> is a value of Days To Display in DayListView(\"DayEventListView\", \"DayEventDetailView\").</p>",
"examples": ["../demo/View-DayList_DayEventList.htm"]
},
{
"name": "daysInAppointmentView",
"tags": ["UI", "AppointmentView"],
"default": "7",
"datatype": "Integer",
"options": "",
"description": "<p><code>daysInAppointmentView</code> is a value of Days To Display in AppointmentView.</p>",
"examples": ["../demo/View-Appointment.htm"]
},
{
"name": "agendaViewDuration",
"tags": ["UI", "AgendaView"],
"default": "\"Month\"",
"datatype": "String",
"options": "<ul>\n <li>\"Month\"</li>\n <li>\"Week\"</li>\n <li>\"CustomDays\"</li>\n</ul>",
"description": "<p>\n <code>agendaViewDuration</code> specifies the duration of AgendaView.\n</p>",
"examples": ["../demo/View-Agenda_Timeline2.htm"]
},
{
"name": "daysInAgendaView",
"tags": ["UI", "AgendaView"],
"default": "15",
"datatype": "Integer",
"options": "",
"description": "<p>\n <code>daysInAgendaView</code> is a value of days to display in the AgendaView if \"agendaViewDuration: CustomDays\".\n</p>",
"examples": ["../demo/QuickUse-Default_DatePicker_EventList.htm"]
},
{
"name": "agendaViewTheme",
"tags": ["UI", "AgendaView"],
"default": "Timeline2",
"datatype": "String",
"options": "<ul>\n <li>\"Timeline1\"</li>\n <li>\"Timeline2\"</li>\n <li>\"Timeline3\"</li>\n</ul>",
"description": "<p>\n Set theme of Agenda View. You can have a look at all themes of Agenda View in Demo.\n</p>\n",
"examples": ["../demo/View-Agenda_Timeline3.htm"]
},
{
"name": "showDaysWithNoEventsInAgendaView",
"tags": ["UI", "AgendaView"],
"default": "false",
"datatype": "Boolean",
"options": "",
"description": "<p>\n Set whether you want to show Days with no events in Agenda View. If you set it to true, \"No Events\" text is displayed below Date String.\n</p>"
},
{
"name": "fixedHeightOfWeekPlannerViewCells",
"tags": ["UI", "WeekPlannerView"],
"default": "true",
"datatype": "Boolean",
"options": "",
"description": "<p>\n Set whether you want to display a fixed height for each cell of \"WeekPlannerView\".\n</p>\n<p>\n If you set <code>fixedHeightOfWeekPlannerViewCells</code> to true, each cell of \"WeekPlannerView\" is assigned a height based on height available for calendar. Each cell is made scrollable so you can view entire content added in each cell. \n View Demo in Web section.\n</p>\n<p>\n If you set <code>fixedHeightOfWeekPlannerViewCells</code> to false, height of cell increases as elements are added in cells and \"WeekPlannerView\" is made scrollable rather than cells. View Demo in Web section.\n</p>\n",
"examples": ["../demo/View-WeekPlanner.htm"]
},
{
"name": "quickAgendaViewDuration",
"tags": ["UI", "QuickAgendaView"],
"default": "\"Week\"",
"datatype": "String",
"options": "<ul>\n <li>\"Week\"</li>\n <li>\"CustomDays\"</li>\n</ul>",
"description": "<p>\n <code>quickAgendaViewDuration</code> specifies the duration of Quick Agenda View.\n</p>",
"examples": ["../demo/Mobile/View-QuickAgenda.htm"]
},
{
"name": "daysInQuickAgendaView",
"tags": ["UI", "QuickAgendaView"],
"default": "5",
"datatype": "Integer",
"options": "",
"description": "<p>\n <code>daysInQuickAgendaView</code> is a value of days to display in the Quick Agenda View if \"quickAgendaViewDuration: CustomDays\".\n</p>",
"examples": ["../demo/Mobile/View-QuickAgenda.htm"]
},
{
"name": "taskPlannerViewDuration",
"tags": ["UI", "TaskPlannerView"],
"default": "\"Week\"",
"datatype": "String",
"options": "<ul>\n <li>\"Week\"</li>\n <li>\"CustomDays\"</li>\n</ul>",
"description": "<p>\n <code>taskPlannerViewDuration</code> specifies the duration of Task Planner View.\n</p>",
"examples": ["../demo/Mobile/View-TaskPlanner.htm"]
},
{
"name": "daysInTaskPlannerView",
"tags": ["UI", "TaskPlannerView"],
"default": "5",
"datatype": "Integer",
"options": "",
"description": "<p>\n <code>daysInTaskPlannerView</code> is a value of days to display in the Task Planner View if \"taskPlannerViewDuration: CustomDays\".\n</p>",
"examples": ["../demo/Mobile/View-TaskPlanner.htm"]
},
{
"name": "fixedHeightOfTaskPlannerView",
"tags": ["UI", "TaskPlannerView"],
"default": "true",
"datatype": "Boolean",
"options": "",
"description": "<p>\n Set whether you want to display a fixed height for each cell of \"TaskPlannerView\".\n</p>\n<p>\n If you set <code>fixedHeightOfTaskPlannerView</code> to true, \"TaskPlannerView\" will be displayed with a height based on height available for calendar causing view to become scrollable for overflowing events/tasks.\n</p>\n<p>\n If you set <code>fixedHeightOfTaskPlannerView</code> to false, height of \"TaskPlannerView\" will increase as events/tasks are added in cells.\n</p>\n",
"examples": ["../demo/View-TaskPlanner.htm"]
},
{
"name": "transitionSpeed",
"tags": ["UI"],
"default": "300",
"datatype": "Integer",
"options": "",
"description": "<p>\n <code>transitionSpeed</code> is a value of View Transition Animation Speed in milliseconds.\n</p>"
},
{
"name": "showTransition",
"tags": ["UI"],
"default": "true",
"datatype": "Boolean",
"options": "",
"description": "<p>\n <code>showTransition</code> specifies whether to perform view transition animations or simply replace a view.\n</p>"
},
{
"name": "fixedNumberOfWeeksInMonthView",
"tags": ["UI", "DetailedMonthView", "MonthView"],
"default": "false",
"datatype": "Boolean",
"options": "",
"description": "<p>\n If <code>fixedNumberOfWeeksInMonthView</code> is set to true, 6 weeks will be displayed in month views.\n Else, number of weeks for a selected month will be displayed.\n</p>"
},
{
"name": "displayWeekNumInMonthView",
"tags": ["UI", "DetailedMonthView", "MonthView"],
"default": "false",
"datatype": "Boolean",
"options": "",
"description": "<p>\n <code>displayWeekNumInMonthView</code> specifies whether to display Week Number in MonthView and DetailedMonthView.\n</p>",
"examples": ["../demo/View-DetailedMonth.htm"]
},
{
"name": "actionOnDayClickInMonthView",
"tags": ["UI", "MonthView"],
"default": "\"ModifyEventList\"",
"datatype": "String",
"options": "<ul>\n <li>\"ModifyEventList\"</li>\n <li>\"ChangeDate\"</li>\n <li>\"DisplayEventListDialog\"</li> \n</ul>",
"description": "<p>\n <code>actionOnDayClickInMonthView</code> defines action to perform on day click in MonthView. \n</p>\n<p>\n <b>\"ModifyEventList\"</b> - if EventList View is added, this option can be used to modify Event List.\n</p>\n<p>\n <b>\"Change Date\"</b> - Use MonthView as a DatePicker.\n</p>\n<p>\n <b>\"DisplayEventListDialog\"</b> - Display EventList in a Dialog which is positioned relative to the Day cell in MonthView.\n</p>",
"examples": ["../demo/View-Month_Events_Dialog.htm", "../demo/Mobile/View-Month_Events_Dialog.htm"]
},
{
"name": "eventIndicatorInMonthView",
"tags": ["UI", "MonthView"],
"default": "\"Events\"",
"datatype": "String",
"options": "<ul>\n <li>\"Events\"</li>\n <li>\"DayHighlight\"</li>\n <li>\"Custom\"</li>\n</ul>",
"description": "<p>\n <code>eventIndicatorInMonthView</code> is used to set whether to add Events or Event Indicator Line or Custom Event View in the MonthView.\n You will have to write code for Custom Event View creation in the <a class=\\\"parameter-link icon-link\\\" href=\"#link-modifyCustomView\"><code>modifyCustomView</code></a> function.\n</p>",
"examples": ["../demo/View-Month_DayHighlight_List.htm", "../demo/Mobile/View-Month_DayHighlight_List.htm", "../demo/View-Month_Custom_Events_Dialog"]
},
{
"name": "eventIndicatorInDatePicker",
"tags": ["UI", "DatePicker"],
"default": "\"DayNumberBold\"",
"datatype": "String",
"options": "<ul>\n <li>\"DayNumberBold\"</li>\n <li>\"Dot\"</li>\n</ul>",
"description": "<p>\n <code>eventIndicatorInDatePicker</code> is used to set the way to indicate the existence of Events for day. If events exist for day, day number is displayed in bold font or dot is displayed below day number. \n</p>",
"examples": ["../demo/View-DetailedMonth.htm"]
},
{
"name": "eventIndicatorInDayListView",
"tags": ["UI", "DayListView"],
"default": "\"Events\"",
"datatype": "String",
"options": "<ul>\n <li>\"DayHighlight\"</li>\n <li>\"Custom\"</li>\n</ul>",
"description": "<p>\n <code>eventIndicatorInDayListView</code> is used to set whether to Event Indicator Line or Custom Event View in the DayListView.\n You will have to write code for Custom Event View creation in the <a class=\\\"parameter-link icon-link\\\" href=\"#link-modifyCustomView\"><code>modifyCustomView</code></a> function.\n</p>",
"examples": ["../demo/View-DayList_DayEventList_Custom_EventCount.htm", "../demo/Mobile/View-DayList_DayEventList_Custom_Event.htm"]
},
{
"name": "averageEventsPerDayForDayHighlightView",
"tags": ["UI", "MonthView"],
"default": "5",
"datatype": "Integer",
"options": "",
"description": "<p>\n Width of the Day Highlighter Line is calculated as a percentage of <code>averageEventsPerDayForDayHighlightView</code>.\n</p>",
"examples": ["../demo/View-Month_DayHighlight_List.htm"]
},
{
"name": "hideExtraEvents",
"tags": ["UI", "DetailedMonthView"],
"default": "true",
"datatype": "Boolean",
"options": "",
"description": "<p>\n If set to true, height of all rows of DetailedMonthView is set equal and Events that fit into the Row are added. \n <a class=\"parameter-link icon-link\" href=\"#link-hiddenEventsIndicatorLabel\"><code>hiddenEventsIndicatorLabel</code></a> is added in the days for which all events can not be added. \n <a class=\"parameter-link icon-link\" href=\"#link-hiddenEventsIndicatorAction\"><code>hiddenEventsIndicatorAction</code></a> will be taken on click of <a class=\"parameter-link icon-link\" href=\"#link-hiddenEventsIndicatorLabel\"><code>hiddenEventsIndicatorLabel</code></a>.\n</p>\n<p>\n If set to false, height of each row in the DetailedMonthView will be increased to accommodate all events for the day.\n</p>\n",
"examples": ["../demo/View-DetailedMonth_HideExtraEvents.htm"]
},
{
"name": "hiddenEventsIndicatorLabel",
"tags": ["UI", "DetailedMonthView", "i18n"],
"default": "\"+(count) more\"",
"datatype": "String",
"options": "",
"description": "<p>\n If <a class=\"parameter-link icon-link\" href=\"#link-hideExtraEvents\"><code>hideExtraEvents</code></a> is set to true, height of all rows of DetailedMonthView is set equal and Events that fit into the Row are added. \n <code>hiddenEventsIndicatorLabel</code> is added in the days for which all events can not be added. \n <a class=\"parameter-link icon-link\" href=\"#link-hiddenEventsIndicatorAction\"><code>hiddenEventsIndicatorAction</code></a> will be taken on click of <code>hiddenEventsIndicatorLabel</code>.\n You can set any string or html string as a <code>hiddenEventsIndicatorLabel</code>.\n If you want to show count of hidden events in the <code>hiddenEventsIndicatorLabel</code> you can use string \"(count)\".\n</p>\n"
},
{
"name": "hiddenEventsIndicatorAction",
"tags": ["UI", "DetailedMonthView"],
"default": "\"ShowEventDialog\"",
"datatype": "<ul>\n <li>String Specifying Action(\"ShowEventDialog\")</li>\n <li>Callback Function</li>\n ",
"options": "",
"description": "<p>\n This is an action to be taken on click of <a class=\"parameter-link icon-link\" href=\"#link-hiddenEventsIndicatorLabel\"><code>hiddenEventsIndicatorLabel</code></a>.\n</p>\n<p>\n With the default action, \"ShowEventDialog\", Event dialog listing all events will be displayed over a Month Day cell for which <a class=\"parameter-link icon-link\" href=\"#link-hiddenEventsIndicatorLabel\"><code>hiddenEventsIndicatorLabel</code></a> is clicked.\n</p>\n<p>\n <code>hiddenEventsIndicatorAction</code> can also be used as a callback function with parameters (dDate, oArrEvents, bShow).\n Here, \n dDate is the date for which event is triggered,\n oArrEvents is the array of Events for dDate,\n bShow indicates whether callback is to show dialog/start action or hide dialog/end action.\n</p> \n"
},
{
"name": "addEventsInMonthView",
"tags": ["UI", "MonthView", "DetailedMonthView"],
"default": "true",
"datatype": "Boolean",
"options": "",
"description": "<p>\n If set to false, events will not be displayed on the calendar even if calDataSource is specified.\n</p>"
},
{
"name": "displayEventsInMonthView",
"tags": ["UI", "MonthView", "DetailedMonthView"],
"default": "true",
"datatype": "Boolean",
"options": "",
"description": "<p>\n If set to false, events will not be displayed on the calendar even if calDataSource is specified. \n But Event Dialog can be displayed. \n This View can be used where less space is available for displaying calendar.\n</p>",
"examples": ["../demo/View-Month_Events_Hidden.htm"]
},
{
"name": "isDragNDropInMonthView",
"tags": ["UI", "MonthView", "DetailedMonthView"],
"default": "true",
"datatype": "Boolean",
"options": "",
"description": "<p>\n Enable or disable Drag and Drop of Event in Month View.\n</p>\n<p><code>isDragNDropInMonthView</code> can be specified in - </p>\n\t<ul>\n <li><a class=\"parameter-link icon-link\" href=\"#link-calDataSource\"><code>\"config\" in calDataSource</code></a> - if its value for the calDataSource is different than one specified in other places.</li>\n <li><a class=\"parameter-link icon-link\" href=\"#link-eventCalendarSource-IA\"><code>eventCalendarSource</code></a> - if its value for the Calendar in eventCalendarSource is different than one specified in other places.</li>\n <li><a class=\"parameter-link icon-link\" href=\"#link-eventSource-IA\"><code>Events</code></a> - if its value for the Event in eventSource is different than one specified in other places.</li>\n\t</ul>\n<p>\n Also read, <a class=\"parameter-link icon-link\" href=\"#link-isDragNDropInMonthView\"><code>isDragNDropInMonthView Property Preferences</code></a> to decide where to set a value of the property.\n</p>",
"examples": ["../demo/Mobile/View-Month_Events_List.htm"]
},
{
"name": "isTooltipInMonthView",
"tags": ["UI", "MonthView", "DetailedMonthView"],
"default": "true",
"datatype": "Boolean",
"options": "",
"description": "<p>\n Show or hide Event Tooltip in Month View.\n</p>\n<p><code>isTooltipInMonthView</code> can be specified in - </p>\n <ul>\n <li><a class=\"parameter-link icon-link\" href=\"#link-calDataSource\"><code>\"config\" in calDataSource</code></a> - if its value for the calDataSource is different than one specified in other places.</li>\n <li><a class=\"parameter-link icon-link\" href=\"#link-eventCalendarSource-IA\"><code>eventCalendarSource</code></a> - if its value for the Calendar in eventCalendarSource is different than one specified in other places.</li>\n <li><a class=\"parameter-link icon-link\" href=\"#link-eventSource-IA\"><code>Events</code></a> - if its value for the Event in eventSource is different than one specified in other places.</li>\n </ul>\n<p>\n Also read, <a class=\"parameter-link icon-link\" href=\"#link-isTooltipInMonthView\"><code>isTooltipInMonthView Property Preferences</code></a> to decide where to set a value of the property.\n</p>",
"examples": ["../demo/Mobile/View-Month_Events_List.htm"]
},
{
"name": "isDragNDropInDetailView",
"tags": ["UI", "DetailView"],
"default": "true",
"datatype": "Boolean",
"options": "",
"description": "<p>\n Enable or disable Drag and Drop of Event in Detail View.\n</p>\n<p><code>isDragNDropInDetailView</code> can be specified in - </p>\n\t<ul>\n <li><a class=\"parameter-link icon-link\" href=\"#link-calDataSource\"><code>\"config\" in calDataSource</code></a> - if its value for the calDataSource is different than one specified in other places.</li>\n <li><a class=\"parameter-link icon-link\" href=\"#link-eventCalendarSource-IA\"><code>eventCalendarSource</code></a> - if its value for the Calendar in eventCalendarSource is different than one specified in other places.</li>\n <li><a class=\"parameter-link icon-link\" href=\"#link-eventSource-IA\"><code>Events</code></a> - if its value for the Event in eventSource is different than one specified in other places.</li>\n\t</ul>\n<p>\n Also read, <a class=\"parameter-link icon-link\" href=\"#link-isDragNDropInDetailView\"><code>isDragNDropInDetailView Property Preferences</code></a> to decide where to set a value of the property.\n</p>"
},
{
"name": "isResizeInDetailView",
"tags": ["UI", "DetailView"],
"default": "true",
"datatype": "Boolean",
"options": "",
"description": "<p>\n Enable or disable Resizing of Event in Detail View.\n</p>\n<p><code>isResizeInDetailView</code> can be specified in - </p>\n\t<ul>\n <li><a class=\"parameter-link icon-link\" href=\"#link-calDataSource\"><code>\"config\" in calDataSource</code></a> - if its value for the calDataSource is different than one specified in other places.</li>\n <li><a class=\"parameter-link icon-link\" href=\"#link-eventCalendarSource-IA\"><code>eventCalendarSource</code></a> - if its value for the Calendar in eventCalendarSource is different than one specified in other places.</li>\n <li><a class=\"parameter-link icon-link\" href=\"#link-eventSource-IA\"><code>Events</code></a> - if its value for the Event in eventSource is different than one specified in other places.</li>\n\t</ul>\n<p>\n Also read, <a class=\"parameter-link icon-link\" href=\"#link-isResizeInDetailView\"><code>isResizeInDetailView Property Preferences</code></a> to decide where to set a value of the property.\n</p>"
},
{
"name": "isTooltipInDetailView",
"tags": ["UI", "DetailView"],
"default": "true",
"datatype": "Boolean",
"options": "",
"description": "<p>\n Show or hide Event Tooltip in Detail View.\n</p>\n<p><code>isTooltipInDetailView</code> can be specified in - </p>\n <ul>\n <li><a class=\"parameter-link icon-link\" href=\"#link-calDataSource\"><code>\"config\" in calDataSource</code></a> - if its value for the calDataSource is different than one specified in other places.</li>\n <li><a class=\"parameter-link icon-link\" href=\"#link-eventCalendarSource-IA\"><code>eventCalendarSource</code></a> - if its value for the Calendar in eventCalendarSource is different than one specified in other places.</li>\n <li><a class=\"parameter-link icon-link\" href=\"#link-eventSource-IA\"><code>Events</code></a> - if its value for the Event in eventSource is different than one specified in other places.</li>\n </ul>\n<p>\n Also read, <a class=\"parameter-link icon-link\" href=\"#link-isTooltipInDetailView\"><code>isTooltipInDetailView Property Preferences</code></a> to decide where to set a value of the property.\n</p>",
"examples": ["../demo/Mobile/QuickUse-Default.htm"]
},
{
"name": "isDragNDropInQuickAgendaView",
"tags": ["UI", "QuickAgendaView"],
"default": "true",
"datatype": "Boolean",
"options": "",
"description": "<p>\n Enable or disable Drag and Drop of Event in Quick Agenda View.\n</p>\n<p><code>isDragNDropInQuickAgendaView</code> can be specified in - </p>\n\t<ul>\n <li><a class=\"parameter-link icon-link\" href=\"#link-calDataSource\"><code>\"config\" in calDataSource</code></a> - if its value for the calDataSource is different than one specified in other places.</li>\n <li><a class=\"parameter-link icon-link\" href=\"#link-eventCalendarSource-IA\"><code>eventCalendarSource</code></a> - if its value for the Calendar in eventCalendarSource is different than one specified in other places.</li>\n <li><a class=\"parameter-link icon-link\" href=\"#link-eventSource-IA\"><code>Events</code></a> - if its value for the Event in eventSource is differen