Calendar

Calendars are used for date selection within a defined time period.

Default

The default calendar configuration includes navigation to select months, select a date, and the ability to navigate via keyboard.

Range

The calendar can be configured to support ranges between two dates.

Localised

The calendar can be configured with locale data, including month names, weekday names, when the weekend is, the first day of the week and date formatting.

In this example the calendar is localised to ae-AE.

Calendar navigation

The calendar nav component can be used independently to allow users to cycle through a group of months.

Calendar grid

Similarly, the calendar grid can be used on its own (the grid and header are separate components).