Vivid Logo Vivid

Calendar Event

The Calendar Event component displays scheduled items within the weekly view of the Calendar component. It supports clickable, interactive events with customizable times and colors.

This component was tested and signed off by Applause (external accessibility specialists).

Implementation

Event Focus Order

Ensure events within a calendar day are added in chronological order, as this determines their keyboard focus sequence.

For example, if an 8 AM event is added after a 2 PM event in the DOM, keyboard focus will move to the 2 PM event first, which can confuse users navigating by keyboard.