Event

Description

Events are displayed in both the Calendar and Timeline patterns.

They are interactive and trigger actions to create new events, and view or edit existing events.

Note: Events are not integrated with Outlook.

Figma library

Anatomy

Layout

Actions

Event-type picker

The event names and colors shown in the selector must match those shown in the legend and event blocks.

Event-type picker

Event legend

• The legend is displayed on all calendar and timeline pages, to aid understanding of event status, duration, and types.
• It is open by default on large viewports in calendar views.
• It is configurable, and the event names and colors shown in the selector must match those shown in the event-type picker and event blocks.

Legend

Event blocks

Styling

• Events are saved into the timeline and calendars, where they are represented as event blocks.
• Event block styling is also summarized in the legend, which is displayed in calendar and timeline views.
• Event blocks are configurable, and the event names and colors shown in the selector must match those shown in the legend and event-type picker.
• Icons and names:
• When space allows, show the event name as the primary identifier.
• When space is constrained, prefer a single clear signal (name, icon, or colour), rather than multiple competing cues.
• Never show both an icon and truncated text together.
• Events that span multiple days or views are represented as a single continuous item.
• Start and end information is shown only at the true boundaries of the event.
• Continued segments indicate continuation without repeating metadata such as icons, descriptions, or start/end details.
• Assistive technologies: Announce the start and end of an event only once at the true boundaries.Continued segments should indicate that the event is ongoing, without repeating start or end information.

Hours: Event blocks in day and week calendar views can span more than one hour.

Full hour

Range - start

Range - mid

Range - end

Days: Event blocks in all calendar and timeline views can be all-day events. In timeline, and month and year calendar views, they can also span more than one day, or be partial days.

• In Calendar and Timeline views, multi‑day events are displayed as a continuous item across visible dates.
• Start and end caps are shown only when the event begins or ends within the current view.
• Continued segments indicate continuation without repeating icons or descriptions.

States

Duration types

Duration options are determined by product requirements and user permissions.

Event action buttons

Event views and action buttons must always be paired correctly. For example, a Manage event view must use Manage event action buttons, and a View event view must use View event action buttons.

Dos and don'ts

Do

Do

Don't

Don't