Anatomy

This introduction to Calendar describes its main elements, the basic functions they provide, and the architecture that holds them together.

The Calendar UI consists of:

An app header, which displays the app name
A scrollable set of upcoming events arranged for the current day and the following day.

Events for a given day are split between all-day events and time-boxed events.

For detailed descriptions of user interactions, see Interaction model.

Events for the current day

Calendar view of Today's events — 1. App header
2. Today's date
3. Today’s all-day events collapsed
4. Today’s scheduled events

Events for the next day

Typically, there are more events than can be displayed on the car screen at one time. A scrollbar allows users to view additional event listings. For example, to view events for the next day, a user may have to scroll down.

Calendar view of tomorrow's events — 1. Tomorrow's date
2. Collapsed list of tomorrow's all-day events
3. Tomorrow’s scheduled events

All-day events

The expandable view of all-day event lists is initially collapsed to give visual priority to a day’s upcoming scheduled events. Expanding the all-day event list pushes the list of scheduled events down.

Recollapsing the list again gives priority to a day’s scheduled events.

Event listings

At a minimum, individual event listings display:

Event title
Calendar source indicator
Event time information, either start and end times for scheduled events or “All day” for daylong events.

Event listings may also display:

An address and a navigation affordance
A phone number (displayed only when a phone number is provided and an address is not)
A phone affordance (if an event included a phone number)