Intro

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

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

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

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
Today
Non-working day
Days from next month

Calendar anatomy

Calendar anatomy

Types

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

Calendar with a secondary calendar type

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

Selection of multiple days

Range selection

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.