Calendar
A calendar shows the dates in a month. It can be interactive, so users can select dates.
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 it is quicker than paging through months.
- A date and a time together. That is a date time picker.
- A tight space. A month grid needs room, so use a picker that opens when needed.
Guidance
Do
October 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Say what the date is for and open on a month near the likely answer, so people do not have to page to reach it.
Don't
September 2026
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Do not label it Date. People cannot tell what they are choosing, or which month to start from.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. 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.
- When you show the chosen date elsewhere, spell out the month. Numeric formats are read differently around the world.