Right Calendar Demo

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

top ↑On Form Date-Time Picking

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');

top ↑Fields Auto-Initialization

In simple cases you don’t need to assign calendar instances to the input fields manually. All you need is to specify the data-calendar attribute on your input-text field and the right calendar will do all the assignments automatically when the user tries to interact with the field.

For example:

<input type="text" data-calendar="{}" />

<input type="text" id="input-field" />
<input type="image" data-calendar="{update: 'input-field'}" />

top ↑Inlined Calendars

You can inline your calendars right onto your page using the insertTo method

You also can build several months calendars and calendar grid by defining the numberOfMonths option