Components

Events List

Also referred to as: Agenda (in Android), List, Events, Event items, Feed

Overview

  • Available sinceMadrid
  • A11Y WCAG 2.1 AA
Figma link
Events List Figma component

Figma library with components for designing Native Mobile.

ServiceNow Docs link
Events list documentation

Implementation and administration guides

When to use

The Events list is used in the Calendar screen to display a list of records associated with the date selected in the calendar component.

When not to use

This component is not intended for use on other screens or in different flows.

Anatomy

iOS events list

iOS

Android events list

Android

  1. Day title - today indication: Specify whether this date is today's date. (If it is not today's date, this indication will not be shown).
  2. Day title - separator dot: This dot separator is used to distinguish the today indication from the date title. (If it is not today's date, the dot separator will not be shown).
  3. Day title - date: Specify the date.
  4. Day title - events indicator: This indicator displays the number of events scheduled for this day.
  5. “All day event” indicator: This indicator displays the number of events on this date that take place for a period of 24 hours, like a 1-day conference or a security drill. (If this date does not include any "All-day" events, this indication will not be shown).
  6. Calendar event’s card - start and end time: Specify the start and end time of the event.
  7. Calendar event’s card - title: Specify the title of the event.
  8. Calendar event’s card - text: Specify additional information about the event.
  9. Separator: This separator is used to distinguish between similar events.
  10. Divider: This divider is used to differentiate between events that belong to different types (for example: differentiate between “All day” event and “Less than a day” event).
  11. “Multi-day event” indicator: This indicates that the following event takes place for more than one full day, like a vacation or a conference. Each of the days within the sequence is marked with its partial day out of the total number of days. For example, 2 /3 days.
  12. Calendar event’s template card - Separator vertical line: This dot vertical line is used to distinguish the event’s time from other event details.

Design recommendations

Do

Only the event hours are displayed

Don’t

The full event date, including the day, is shown

Do

Use system template named “Calendar”

Don’t

Avoid using multiple different templates

Alignment and positioning

When scrolling through the Event list, the title of the current day remains sticky at the top of the list. As the day changes, the new day's title replaces the previous one in the sticky position.

  1. Current day title: This title remains sticky

Subcomponent states

Day title

“Day title” of the Events list component has 3 states: Default, Empty state and Error state.

State Day Title
Default events_list_state_01.png
Empty state events_list_state_02.png
Error events_list_state_03.png

Calendar event's template card

“Calendar event’s template card” of the Events list component has 2 states: Default and Loaded.

State Calendar event's template card
Default events_list_state_04.png
Loaded events_list_state_05.png

Interactions

Learn how Events list responds when a user interacts with it.

Scrolling the Events list

When scrolling through the events list, the "current selected date" is visually marked in the Calendar component. 
This allows the user to view the events associated with that specific date.

Tapping on a calendar event card directs the user to a detailed screen record.