Calendar
A calendar showing dates across the span of a month. They can be interactive and selectable.
When to use
- Choosing a date where the day of the week or the shape of the month matters.
- A date near today, which a month view makes quick to reach.
- Shown inline, where the calendar is the main thing on the screen or panel.
When not to use
- A date far in the past or future, such as a birth date. Typing beats paging through months.
- A date and a time together. That is a date time picker.
- A tight space, since a month grid needs room. Use a picker that opens on demand.
Guidance
Do
October 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Name what the date is for and start on a month near the answer, so the reader is not paging to reach it.
Don't
September 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Do not label it Date. The reader cannot tell what they are choosing, and nothing says which month is a sensible place to start.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| calendar | brand-bold | 0.460Marked | 0.598Marked |
| calendar | surface | 0.000Substrate | 0.000Substrate |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- Say what the date is for. Due date, start date, date of the event.
- Spell the month in the value shown elsewhere, since numeric formats are read differently around the world.