Javatpoint Logo
Javatpoint Logo

Calendar Parameters

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:
{{monthPicker}} {{yearPicker}}

Specific Calendar Parameters

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

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA