Intro

The calendar control lets users select a single date, multiple days, entire week(s), or a date range. The calendar shows all time-related data (year, month, week, day, date) at a glance. It also allows users to navigate directly from one month or year to another, or to display multiple months.

When to Use

Use the calendar if:

• You want the user to select a single date, multiple days, entire week(s), or a date range.
• You want to display multiple months at once.
• The calendar always needs to be visible and prominent.
• Users need to see the year, month, week, weekday and date at a glance to decide which date to select. For example, a user might want to select a date based on the day of the week.
• Users might be used to different locale-specific date formats (such as day-month-year or month-day-year). Enabling them to select the date visually using the calendar bypasses format-specific interpretation.
• You want to highlight special days or hide/disable specific days.

Do not use the calendar if:

• The user is a power user who has to enter a lot of data fast. In this case, use the date picker.
• The keyboard is the primary input device. In this case, use the date picker.
• The available screen space is limited and displaying the calendar permanently would take up too much space.
• The user’s primary goal is to select a date range. In this case, use date range selection.
• You want to display a range of weekdays in a single row. In this case, use the calendar date interval.
• The user wants to compare calendars from different people. In this case, use the planning calendar.
• The user wants to select combined date and time values. In this case, use the date/time picker.

Components

The calendar can stand alone as a control, but is also part of many other controls, such as the date picker, date/time picker or the date range selector.

By default, the focus starts on the current day, but can be customized to fit the use case.

The control allows you to show or hide the calendar weeks. You can also customize the calendar by defining the start and end of a week, or by defining the earliest or latest date.

Specific days can also be disabled, for example non-working days or public holidays.

Month and Year View

The control offers a day view, month view, year view, or year ranges.

Legend for Highlighted Days

Within the calendar, special days can be highlighted. A legend is used to define the meaning of the highlights. Application development teams are responsible for using the colors consistently within one product area.

Calendar with highlighted days and legend

Types

The following calendar types are available:

• Single day selection: The user can select a single day at a time.
• Single interval selection: The user can select an interval or one entire week.
• Multiple day selection: The user can select multiple days, which do not have to be next to each other. It’s also possible to select entire week(s) and a date range.
• Multiple months: Use this calendar type if users need to see more than one month to make their selection. You can offer single day selection or multiple selection (such as multiple days, entire weeks, or date ranges). We recommend showing no more than two or three calendars at the same time.

Behavior and Interaction

The behavior and interaction of the calendar depends on the calendar type. Some interactions are only available for specific calendar types.

Responsiveness

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

When using the multiple month view, the calendar adapts to the size of the screen. On small screens, only one calendar is displayed.

Related Topics