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

Use the calendar:

• To select a single date, multiple days, or a date range.
• To enable date selection independently of the specific date format.
• To enable context-based selection (such as a specific day of the week).
• If you need to keep the calendar visible and prominent.

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.

Anatomy

1. Previous button: Navigates back to previous month.
2. Month view button: Opens the view for month selection.
3. Year view button: Opens the view for year selection.
4. Next button: Navigates to next month.
5. Days of the week
6. Calendar weeks: Gregorian calendar type only. Can be hidden.
7. Working day
8. Selected day
9. Today
10. Non-working day
11. Days from next month

Variants

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

Selection

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

Navigation

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

Responsive Behavior

Use the calendar within a responsive layout container. The calendar itself is not responsive.

Related Links