Do

• Use calendar view to display a visual overview of a week or a month.
• Use calendar view to filter the information based on days. For example, events, tasks, and deadlines.

Don't

• Don’t use calendar view for date selection or multiple date selection in forms. Use pickers instead.
• Don’t use calendar view when the available screen space is limited and displaying the calendar permanently would take up too much space.

A. Calendar Header

The calendar header includes the title, subtitle (optional), and buttons.

B. Weekday Label Container

The weekday label container displays the seven days of a week. You can customize the format to match your local preference.

C. Date Label Container

The date label container shows all the days of the month/week in a grid view.

D. Dragging Handle (Optional)

The dragging handle provides a visual cue on the dragging behavior to expand the week view and collapse the month view.

Anatomy of a calendar

There are different types of calendar views. Select the one that best suits the purpose of your app and start designing from there.

• Month View (Default)
• Week View
• Expandable View – Users can switch from the default week view to month view by swiping up on the dragging handle.

Types of calendar view containers (from top to bottom): week view, month view, and expandable view

Each calendar can only apply one of the following selection types:

• Single Day – Only one single day can be selected
• Day Range – A range can be selected by choosing a start day and an end day

The range selection calendar only supports month view.

Calendar with single day selection (left) and day range selection (right)

The calendar header provides the following layouts:

Left-Aligned

The title is left-aligned. A leading button or icon and a maximum of three trailing buttons are supported.

Center-Aligned

The title is center-aligned. A leading button or icon and a maximum of two trailing buttons are recommended.

The header also supports the following types of titles:

Single-Line Title

It can be used to show the displayed month and year, or the topic of the calendar.

Double-Line Title

It can be used to show the main title together with a subtitle for additional information.

Large Title

The title is emphasized by using a larger font size and white space. This design can be applied when showing a calendar on the home screen or at the top of the page.

The text contents can be customized to reflect the month/week on display.

From left to right: left-aligned title, center-aligned title; from top to bottom: single-line title, double-line title, large title

The format of the calendar week labels can be customized to match your local preference. Besides, the calendar provides the following types of start day of the week:

• Sunday (Default) – US Standard
• Monday – Europe, Asia, Oceania Standard
• Saturday – Middle East Standard

Week label starting from Sunday (top), Monday (middle), and Saturday (bottom)

The calendar supports the following states:

• Default – days of the month/week being displayed
• Today – the current system date
• Selected – the selected date
• Today + Selected – only appears when the selected date is today
• Out of Month – days in the previous or next month/week

Date label states from left to right: default, today, selected, today and selected, out of month

Calendars with status indicators: month view (top), week view (bottom)

The calendar can show two calendar types on the same frame. The alternate calendar date label is displayed below the primary calendar date label, and the year and month are shown on the subtitle as a default. Below are the available calendar types for both the primary and the secondary calendar:

• Gregorian (default primary calendar)
• Chinese
• Hebrew
• Islamic
• Japanese

Calendar with alternate calendar labels