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.

Calendar view of Today's all-day events
1. Calendar view of today's all-day events

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)
Detailed view of a single event
1. Event title
2. Calendar source indicator
3. Event duration
4. Event location
5. Navigation affordance
6. Phone affordance