Calendar

ExperimentalUpdated May 12, 2026

Schedule, timetable, diary

Description

The Calendar pattern supports planning, viewing, and managing events across days, weeks, months, and years.

It uses an event‑driven interaction model.

Events are interactive and focusable. Date cells provide structure and context but do not trigger actions.
Event creation and editing are always explicit and initiated through dedicated controls.
As available space decreases, the Calendar prioritises event visibility over controls and configuration options.

Note: Calendar is not integrated with Outlook.

Figma library

Warning

Choosing the right pattern Use Calendar to view and manage events across multiple time ranges: day, week, month, or year. Use Timeline when users need to view events across multiple team members, understand reporting relationships, or assess coverage and availability across short, fixed time ranges (one week, two weeks, four weeks, or a calendar month).

Anatomy

The Calendar anatomy describes the core structural elements that are available across different views. Some elements are shown or hidden depending on the selected view, viewport size, and user permissions.

Anatomy

Views

The selected calendar view persists between visits.

Day or week view

Month view

Year view

Calendar widget

Period navigation

Actions

New event

Event block

Calendar view

Set work location

Work location action popover button flow

Legend

Both calendar and timeline use the event legend pattern to aid understanding of event status, duration, and types.

It's open by default on large viewports in calendar views.
It's configurable, and the event names and colors shown in the selector must match those shown in the event-type picker and event blocks.

Warning

See guidance and examples of event pattern

Event blocks

Event blocks have different styles and interaction states.
As the visible time range increases and event density grows, event detail is progressively reduced.Detailed information is prioritised in day and week views, and simplified in month and year views.
When space is constrained, use a single clear signal (name OR icon), rather than multiple competing cues.

Events in day and week calendars

Events in a month calendar

Events in a year calendar

Dos and Don'ts

Don't

TODO: Point out that for screen reader and keyboard users, when navigating through the calendar, only the events are focusable and read out. Empty dates are not.

Date	Change
April 2026	Page created.