Following is a list of available parameters which are used with calendar.
Index |
Parameter |
Type |
Description |
1) |
container |
string or HTMLElement |
String with CSS selector or HTMLElement where to place generated Calendar HTML. Use only for inline pickers |
2) |
input |
string or HTMLElement |
String with CSS selector or HTMLElement with related input element |
3) |
scrollToInput |
boolean |
Scroll viewport (page-content) to input when calendar opened |
4) |
inputReadOnly |
boolean |
Sets "readonly" attribute on specified input |
5) |
convertToPopover |
boolean |
Converts calendar modal to Popover on large screens (on iPad) |
6) |
onlyOnPopover |
boolean |
Enable it and Calendar will be always opened in Popover |
7) |
cssClass |
string |
Additional CSS class name to be set on calendar modal |
8) |
closeByOutsideClick |
boolean |
If enabled, picker will be closed by clicking outside of picker or related input element |
9) |
toolbar |
boolean |
Enables calendar modal toolbar |
10) |
toolbarCloseText |
string |
Text for Done/Close toolbar button |
11) |
toolbarTemplate |
string |
Toolbar HTML Template. By default it is HTML string with following template:
|
Index |
Parameter |
Type |
Description |
1) |
value |
array |
Array with initial selected dates. Each array item represents selected date |
2) |
disabled |
Date Range |
Additonal disabled dates. Parameter accepts so called Date Range (look below for details) |
3) |
events |
Date Range |
Dates with events. Will be marked with additonal "dot" on calendar day. Parameter accepts so called Date Ranges (look below for details) |
4) |
rangesClasses |
array |
Date ranges you want to add custom CSS class for additional styling. Look below for accepted format |
5) |
formatValue |
function (p, values) |
Function to format input value, should return new/formatted string value. values is array where each item represents selected date |
6) |
monthNames |
array |
Array with full month names |
7) |
monthNamesShort |
array |
Array with short month names |
8) |
dayNames |
array |
Array with week day names |
9) |
dayNamesShort |
array |
Array with week day short names |
10) |
updateValuesOnTouchmove |
boolean |
Updates picker and input values during touch move |
11) |
firstDay |
number |
First day of the week. By default 1 - Monday |
12) |
weekendDays |
array |
Array with index number of weekend days, by default it is Saturday and Sunday |
13) |
dateFormat |
string 'yyyy-mm-dd' |
Default date format, available expressions:
'yyyy' - 4 digits year
'yy' - 2 digits year
'mm' - 2 digits month number, from 01 to 12
'm' - month number, from 1 to 12
'MM' - full month name
'M' - short month name
'dd' - 2 digits day number, from 01 to 31
'd' - day number, from 1 to 31
'DD' - full week day name
'D' - short week day name |
14) |
multiple |
boolean |
Enable to allows select multiple dates/values |
15) |
rangePicker |
boolean |
Enable to enable range picker. Not compatible with multiple |
16) |
direction |
string |
Months layout direction, could be 'horizontal' or 'vertical' |
17) |
minDate |
Date |
Minimum allowed date |
18) |
maxDate |
Date |
Maximum allowed date |
19) |
touchmove |
boolean |
If enabled then calendar months slides follow finger during touch move |
20) |
animate |
boolean |
Enables transition between months |
21) |
closeOnSelect |
boolean |
Enable and calendar will be closed when user pick a date |
22) |
weekHeader |
boolean |
Enable week header with short name week days |
23) |
monthPicker |
boolean |
Enable month picker in toolbar |