Calendar is a touch optimized component that provides an easy way to handle dates.
Calendar could be used as inline component or as overlay. Overlay Calendar will be automatically converted to Popover on tablets (iPad).
Calendar can be created and initialized only using JavaScript. We need to use related App's method:
myApp.calendar(parameters) - initialize Calendar with parameters
For example:
var myCalendar = app.calendar({
input: '#calendar-input'
});Let's look on list of all available parameters:
| Parameter | Type | Default | Description |
|---|---|---|---|
| Common Picker Modal Component Parameters | |||
| container | string or HTMLElement | String with CSS selector or HTMLElement where to place generated Calendar HTML. Use only for inline pickers | |
| input | string or HTMLElement | String with CSS selector or HTMLElement with related input element | |
| scrollToInput | boolean | true | Scroll viewport (page-content) to input when calendar opened |
| inputReadOnly | boolean | true | Sets "readonly" attribute on specified input |
| convertToPopover | boolean | true | Converts calendar modal to Popover on large screens (on iPad) |
| onlyOnPopover | boolean | false | Enable it and Calendar will be always opened in Popover |
| cssClass | string | Additional CSS class name to be set on calendar modal | |
| toolbar | boolean | true | Enables calendar modal toolbar |
| toolbarCloseText | string | 'Done' | Text for Done/Close toolbar button |
| toolbarTemplate | string | Toolbar HTML Template. By default it is HTML string with following template:<div class="toolbar">
<div class="toolbar-inner">
{{monthPicker}}
{{yearPicker}}
</div>
</div> | |
| Specific Picker Parameters | |||
| value | array | Array with initial selected dates. Each array item represents selected date | |
| formatValue | function (p, values) | Function to format input value, should return new/formatted string value. values is array where each item represents selected date | |
| monthNames | array | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'] | Array with full month names |
| monthNamesShort | array | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | Array with short month names |
| dayNames | array | ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] | Array with week day names |
| dayNamesShort | array | ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] | Array with week day short names |
| updateValuesOnTouchmove | boolean | true | Updates picker and input values during touch move |
| firstDay | number | 1 | First day of the week. By default 1 - Monday |
| weekendDays | array | [0, 6] | Array with index numeber of weekend days, by default it is Saturday and Sunday |
| dateFormat | string | 'yyyy-mm-dd' | Default date format, available expressions:
|
| multiple | boolean | false | Enable to allows select multiple dates/values |
| direction | string | 'horizontal' | Months layout direction, could be 'horizontal' or 'vertical' |
| minDate | Date | null | Minimum allowed date |
| maxDate | Date | null | Maximum allowed date |
| touchmove | boolean | true | If enabled then calendar months slides follow finger during touch move |
| animate | boolean | true | Enables transition between months |
| closeOnSelect | boolean | false | Enable and calendar will be closed when user pick a date |
| weekHeader | boolean | true | Enable week header with short name week days |
| monthPicker | boolean | true | Enable month picker in toolbar |
| monthPickerTemplate | string | Month picker HTML template. By default it is:<div class="picker-calendar-month-picker"> <a href="#" class="link icon-only picker-calendar-prev-month"> <i class="icon icon-prev"></i> </a> <span class="current-month-value"></span> <a href="#" class="link icon-only picker-calendar-next-month"> <i class="icon icon-next"></i> </a> </div> | |
| yearPicker | boolean | true | Enable year picker in toolbar |
| yearPickerTemplate | string | Year picker HTML template. By default it is:<div class="picker-calendar-year-picker"> <a href="#" class="link icon-only picker-calendar-prev-year"> <i class="icon icon-prev"></i> </a> <span class="current-year-value"></span> <a href="#" class="link icon-only picker-calendar-next-year"> <i class="icon icon-next"></i> </a> </div> | |
| Callbacks | |||
| onChange | function (p, values, displayValues) | Callback function that will be executed when picker value changed. values and displayValues are arrays where each item represents value/display value of related column | |
| onMonthAdd | function (p, monthContainer) | Callback function that will be executed when newly generated month HTML element will be added to calendar. | |
| onDayClick | function (p, dayContainer, year, month, day) | Callback function that will be executed when user clicks/select any date | |
| onMonthYearChangeStart | function (p, year, month) | Callback function that will be executed in the beginning of transition to another month/year | |
| onMonthYearChangeEnd | function (p, year, month) | Callback function that will be executed in the end of transition to another month/year | |
| onOpen | function (p) | Callback function that will be executed when picker is opened | |
| onClose | function (p) | Callback function that will be executed when picker is closed | |
After we initialize Calendar we have its initialized instance in variable (like myCalendar variable in example above) with helpful methods and properties:
| Properties | |
|---|---|
| myCalendar.params | Object with passed initialization parameters |
| myCalendar.value | Array where each item represents selected date |
| myCalendar.opened | true if Calendar is currently opened |
| myCalendar.inline | true if Calendar is inline Calendar |
| myCalendar.cols | Array with specified Calendar columns. Each column also has its own methods and properties (look below) |
| myCalendar.container | Dom7 instance with Calendar HTML container |
| Methods | |
| myCalendar.setValue(values) | Set new selected dates. values is array where each item represents selected date |
| myCalendar.nextMonth(duration) | Calendar transition to next month for specified duration in ms |
| myCalendar.prevMonth(duration) | Calendar transition to previous month for specified duration in ms |
| myCalendar.nextYear() | Calendar transition to next year |
| myCalendar.prevYear() | Calendar transition to previous year |
| myCalendar.setYearMonth(year, month, duration) | Calendar transition to specified year, month for specified duration in ms |
| myCalendar.open() | Open Calendar |
| myCalendar.close() | Close Calendar |
| myCalendar.destroy() | Destroy Calendar instance and remove all events |
If you initialize Calendar as inline Calendar it is possible to access to Calendar's instance from its HTML container
var myCalendar = $$('.calenadr-inline')[0].f7Calendar;<div class="content-block-title">Default setup</div> <div class="list-block"> <ul> <li> <div class="item-content"> <div class="item-inner"> <div class="item-input"> <input type="text" placeholder="Your birth date" readonly id="calendar-default"> </div> </div> </div> </li> </ul> </div>
var calendarDefault = myApp.calendar({
input: '#calendar-default',
});<div class="content-block-title">Custom date format</div> <div class="list-block"> <ul> <li> <div class="item-content"> <div class="item-inner"> <div class="item-input"> <input type="text" placeholder="Select date" readonly id="calendar-date-format"> </div> </div> </div> </li> </ul> </div>
var calendarDateFormat = myApp.calendar({
input: '#calendar-date-format',
dateFormat: 'DD, MM dd, yyyy'
});<div class="content-block-title">Multiple Values</div> <div class="list-block"> <ul> <li> <div class="item-content"> <div class="item-inner"> <div class="item-input"> <input type="text" placeholder="Select multiple dates" readonly id="calendar-multiple"> </div> </div> </div> </li> </ul> </div>
var calendarMultiple = myApp.calendar({
input: '#calendar-multiple',
dateFormat: 'M dd yyyy',
multiple: true
});<div class="content-block-title">Inline with custom toolbar</div> <div class="content-block"> <div style="padding:0; margin-right:-15px; width:auto" class="content-block-inner"> <div id="calendar-inline-container"></div> </div> </div>
var $$ = Dom7;
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August' , 'September' , 'October', 'November', 'December'];
var calendarInline = myApp.calendar({
container: '#calendar-inline-container',
value: [new Date()],
weekHeader: false,
toolbarTemplate:
'<div class="toolbar calendar-custom-toolbar">' +
'<div class="toolbar-inner">' +
'<div class="left">' +
'<a href="#" class="link icon-only"><i class="icon icon-back"></i></a>' +
'</div>' +
'<div class="center"></div>' +
'<div class="right">' +
'<a href="#" class="link icon-only"><i class="icon icon-forward"></i></a>' +
'</div>' +
'</div>' +
'</div>',
onOpen: function (p) {
$$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
$$('.calendar-custom-toolbar .left .link').on('click', function () {
calendarInline.prevMonth();
});
$$('.calendar-custom-toolbar .right .link').on('click', function () {
calendarInline.nextMonth();
});
},
onMonthYearChangeStart: function (p) {
$$('.calendar-custom-toolbar .center').text(monthNames[p.currentMonth] +', ' + p.currentYear);
}
});