There are some standard use cases for the Calendar widget. You can use the keyboard buttons like arrows, escape and enter buttons to navigate through the calendars
The code of the fields initiation looks like this:
// simple calendars
new Calendar().assignTo('date-simple');
new Calendar().assignTo('date-triggered', 'date-trigger');
// calendar with the time-picker
new Calendar({format: "%Y-%m-%d %H:%M"}).assignTo('date-with-time');
// calendar with the bottom buttons
new Calendar({
showButtons: true
}).assignTo('date-with-buttons');
// calendar with fancy formatting
new Calendar({format: "%Y-%m-%d %l:%M"}).assignTo('date-with-formatting');
// calendar with dates limit
var min_date = new Date();
var max_date = new Date();
min_date.setMonth(min_date.getMonth() - 1);
max_date.setMonth(max_date.getMonth() + 1);
new Calendar({
minDate: min_date, maxDate: max_date
}).assignTo('date-with-limits');
// with year buttons
new Calendar({listYears: true}).assignTo('date-with-years');
// calendar with 15-minute time periods
new Calendar({
timePeriod: 15, format: "%Y-%m-%d %H:%M"
}).assignTo('date-with-15-minutes-period');
// calendar with 3-hours time periods
new Calendar({
timePeriod: 180, format: "%Y-%m-%d %H:%M"
}).assignTo('date-with-3-hours-period');
In simple cases you don’t need to assign calendar instances to the input fields manually. All you need to specify the rel="calendar" attribute on your input-text field and the right calendar will do all the assignments automatically when the page is loaded.
You also can specify an input-trigger pair with the rel="calendar[input_field_id]" attribute on the trigger element.
For example:
<input type="text" rel="calendar" />
<input type="text" id="input-field" />
<input type="image" rel="calendar[input-field]" />
You can inline your calendars right onto your page using the insertTo method
You also can build several months calendars and calendar greed by defining the numberOfMonths option