The Calendar widget is a JavaScript-based calendar that can be embedded within a page.

The whole list of configuration parameters is available in CalendarCfg bean.

Using default date

Calendar labels can be customized in a variety of ways according to the requirement, This can be achieved by using property dateLabelFormat and dayOfWeekLabelFormat.

Some date patterns are defined at application level :

shortFormat, longFormat, mediumFormat and fullFormat. Default values for these patterns are :

  • shortFormat: "d/M/y"
  • mediumFormat: "d MMM y"
  • longFormat: "d MMMM yyyy"
  • fullFormat: "EEEE d MMMM yyyy"

These patterns can be accessed through eg:aria.core.AppEnvironment.getDateFormats().shortFormat. Supported patterns are similar to:

Useful Keyboard shortcuts

  • Arrow Left: change the selection to the previous day
  • Arrow Right: change the selection to the next day
  • Arrow Up: change the selection to the same day in the previous week
  • Arrow Down: change the selection to the same day in the next week



Calendar can accept custom template thanks to property defaultTemplate, where user can implement there own template. Here is a customized version showing days vertically. Both calendars are bound to each other, so that selecting a day or navigating inside one calendar changes the other.


The 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 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.