jQuery user interface framework
Themable, WAI-ARIA accessible javascript calendar with mouse and keyboard interactions for navigation. For examples, check out Calendar demo page.
| Key | Type | Required | Description |
|---|---|---|---|
year |
number |
No | Year for the first calendar. Defaults to current year |
month |
number |
No | Month index for the first calendar (0-11). Defaults to current month |
dayNames |
array |
No | Short names of the days of the week. ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] |
dayNamesFull |
array |
No | Full names of the days of the week. ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] |
monthNamesFull |
array |
No | Full names of the months of the year. ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] |
startDay |
number |
No | The start day of week (1 stands for Monday, 0 stands for Sunday). Defaults to 0 |
weekNumbers |
boolean |
No | Indicates whether to display the week number. Defaults to false |
selectOtherMonths |
boolean |
No | When true days in other months shown before or after the current month are selectable. This only applies if showOtherMonths is also true. Defaults to false |
showOtherMonths |
boolean |
No | Display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use selectOtherMonths. Defaults to true |
showNavigation |
boolean |
No | Display month navigation (prev month and next month links). Defaults to true |
months |
number |
No | The number of months to show (1-12). Defaults to 1 |
inline |
boolean |
No | Indicates whether calendar is inline. Defaults to false |
disablePast |
boolean |
No | Indicates whether past dates are clickable. Defaults to false |
dateFormat |
string |
No | Date format (Y, y, m, n, F, M, d, j, D, l). Defaults to Y-m-d |
position |
string |
No | The position of datepicker. Possible values: bottom, top. Defaults to bottom |
minDate |
date |
No | Set a minimum selectable date via a Date object, or null for no limit |
| Method | Arguments | Description |
|---|---|---|
close |
.zinoCalendar("close") | Close datepicker. Return a reference to datepicker instance |
destroy |
.zinoCalendar("destroy") | Remove the datepicker functionality completely. This will return the element back to its pre-init state. |
draw |
.zinoCalendar("draw", year, month, index, id) | Draw calendar. |
option |
.zinoCalendar("option", optName, [value]) | Get or set any datepicker option. If no value is specified, will act as a getter. Return a reference to datepicker instance |
option |
.zinoCalendar("option", options) | Set multiple datepicker options at once by providing an options object. Return a reference to datepicker instance |
refresh |
.zinoCalendar("refresh") | Redraw a datepicker, after having made some external modifications. Return a reference to datepicker instance |
| Event | Arguments | Description |
|---|---|---|
beforeOpen |
None |
This event is triggered when a datepicker attempts to open. If the onBeforeOpen event handler (callback function) returns false, the open will be prevented. this refer to datepicker instance. |
beforeClose |
None |
This event is triggered when a datepicker attempts to close. If the onBeforeClose event handler (callback function) returns false, the close will be prevented. this refer to datepicker instance. |
open |
function(element) | element - HTMLElement to which the datepicker is attached This event is triggered when datepicker is opened. this refer to datepicker instance. |
close |
None |
This event is triggered when the datepicker is closed. this refer to datepicker instance. |
select |
function(element, selectedDate, date, cell) | element - HTMLElement to which the datepicker is attached selectedDate - selected date in the specified format date - selected date in milliseconds cell - HTMLElement that you click on Allows you to define your own event when the datepicker is selected. this refer to datepicker instance. |
onBeforeShowDay |
function(date) | The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or "" for the default presentation. It is called for each day in the datepicker before it is displayed. |