Range Calendar

The Range Calendar widget is very similar to the calendar widget but it allows to easily select two dates, instead of only one.

The whole list of configuration parameters is available in the RangeCalendarCfg bean.

Simple usage

The following sample shows how to use the RangeCalendar widget in a template:

Changing the selection logic

By default, when selecting a date (either by clicking on it, or by using the keyboard and pressing SPACE or ENTER), the Range Calendar widget alternatively sets the fromDate and the toDate values (swapping them if necessary), so that the boundaries of the selected date range are always the last two selected dates.

It is possible to change this logic by implementing an onDateSelect handler:

The onDateSelect handler is called just after the user clicked on a date or pressed SPACE or ENTER. The date is passed as the date property of the event object. The handler can implement some custom logic with the selected date, and can then cancel the default behavior by setting the cancelDefault property to true on the event object.

Advanced usage

The following sample demonstrates the use of a custom onDateSelect handler, and shows how the onmouseover and onmouseout listeners can be used to achieve a hover effect:


The Range Calendar widget can be configured to style ranges of dates in a specific way.

Each range of dates is supposed to have the structure defined in the Range bean, referencing some CSS classes to be applied on the corresponding days.

Here is a sample showing this feature:

The ranges property is bindable, which means it is possible to create a new ranges array and assign it with setValue and the ranges will automatically be updated in the range calendar. However, note that changes inside an already assigned ranges array do not trigger an update of the display, the array of ranges itself has to be a new one for the change to be detected.