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.

Use the heading attribute to give the event a brief title.

Use the description attribute to give the event a brief description.

Use the start attribute to set the time the event starts. The time is expressed as a number. Eg. 12.5 is 12:30pm, 18.75 is 6:45pm.

Use the duration attribute to indicate how long the event will last. Eg. 2 is 2 hours, 0.75 is 45 munites.

Use the appearance attribute to choose between filled (default) and subtle appearances.

Use the connotation attribute to choose between: information (default), accent, cta, success, alert and announcement connotations.

Use the overlap-count when events overlap each other.

The number you provide sets the stacking context of the event. The event you need to be at the bottom (usually the longest event) should have a overlap-count of 0.