The calendar shows time-related data at a glance. It allows the user to select a single day, multiple days, or date ranges and to navigate through different months and years.
Calendar – live example
When to Use
Don’t use the calendar:
- Тo enter a lot of data quickly or primarily using the keyboard. Use the date picker instead.
- To primarily select date ranges. Use the date range picker instead.
- If the available screen space is limited.
- To select a combination of date and time values. Use the date/time picker instead.
- Previous button: Navigates back to previous month.
- Month view button: Opens the view for month selection.
- Year view button: Opens the view for year selection.
- Next button: Navigates to next month.
- Days of the week
- Calendar weeks: Gregorian calendar type only. Can be hidden.
- Working day
- Selected day
- Non-working day
- Days from next month
You can show one calendar type or two:
- Single calendar type: Gregorian, Japanese, Buddhist, Islamic, or Persian
- Two calendar types: A primary and a secondary calendar
Islamic calendar – live example
Calendar with a secondary calendar type – live example
You can hide the calendar weeks. They are hidden by default for all calendar types except the Gregorian calendar.
Calendar with hidden calendar weeks
Behavior and Interaction
The calendar supports different types of selection:
- Single day: The user can select a single day at a time.
- Multiple days: The user can select multiple days, which do not have to be next to each other. Navigating to other months doesn’t cancel the selection.
- Range: The user can select multiple days from a start date to an end date.
Selection of a single day – live example
Selection of multiple days – live example
Range selection – live example
To change the month, the user can either use the previous/next arrows or select a specific month in the month view.
To change the year, the user can either scroll through the months with the previous/next arrows or select a specific year in the year view.
Calendar – month view
Calendar – year view
Minimum and Maximum Dates
You can define the earliest and latest valid dates for the calendar (minimum and maximum dates). Selection and navigation are then disabled for dates outside this range.
Calendar with minimum and maximum dates
Use the calendar within a responsive layout container. The calendar itself is not responsive.