ScheduleEventCard component — an event card with a colored left border, title, date/time range, optional avatar group, and a category badge.
Designed for scheduling/calendar sidebar lists.
Categories
| Category | Border colour | Badge colours |
|---|---|---|
:meeting | blue-500 | bg-blue-100 / text-blue-700 |
:event | teal-500 | bg-teal-100 / text-teal-700 |
:leave | red-400 | bg-red-100 / text-red-600 |
:default | primary | bg-primary/10 / text-primary |
Examples
<.schedule_event_card
title="Team Standup"
category={:meeting}
date="2026 / JAN / 15"
time_range="09:00 AM - 10:00 AM"
avatars={[%{src: "/avatars/alice.png", name: "Alice"}, "Bob"]}
max_avatars={3}
/>
<.schedule_event_card title="Annual Leave" category={:leave} />Summary
Functions
Renders a schedule event card with a coloured left border, title, optional date/time rows, stacked avatars and a category badge.
Functions
Renders a schedule event card with a coloured left border, title, optional date/time rows, stacked avatars and a category badge.
Attributes
title(:string) (required) - Event title displayed in bold.date(:string) - Date string, e.g. "2022 / JUL / 30". Omit to hide the date row. Defaults tonil.time_range(:string) - Time range string, e.g. "09:00 AM - 11:00 AM". Omit to hide the time row. Defaults tonil.category(:atom) - Category determines the left-border and badge colour. Defaults to:default. Must be one of:meeting,:event,:leave, or:default.category_label(:string) - Override the badge text. Falls back to the category name. Defaults tonil.avatars(:list) - List of avatar descriptors — strings or %{src: url, name: name} maps. Defaults to[].max_avatars(:integer) - Maximum number of avatar circles to display before showing an overflow count. Defaults to3.class(:string) - Additional CSS classes merged via cn/1. Defaults tonil.- Global attributes are accepted. HTML attributes forwarded to the root element.