calendar-event
Styled event block for day, hour, and week schedule views. CSS-only custom element with category colors, icons, and duration support.
Overview
The <calendar-event> element is a CSS-only custom element for displaying events inside schedule views. It provides category-based color theming, icon support, half-hour positioning, and expandable details — all without JavaScript.
Used as a child of <hour-view> inside <day-view>.
Basic event
<calendar-event data-category="meeting"> <time datetime="09:00">9:00</time> <icon-wc name="users" size="sm"></icon-wc> Sprint standup</calendar-event>Attributes
| Attribute | Values | Description |
|---|---|---|
data-category |
meeting, deadline, personal, focus |
Sets --event-color for the accent bar and background tint. |
data-start |
30 |
Places the event in the bottom half of its hour row (half-hour start). |
data-duration |
1h, 1h30m, 2h, 3h |
Multi-hour events. JS positions them absolutely to span across hour rows. |
Content
Events can contain any combination of:
| Element | Purpose |
|---|---|
<time datetime="HH:MM"> | Event start time (displayed as label) |
<time datetime="PT1H"> | Duration (hidden visually, used for positioning) |
<icon-wc> | Event icon |
<details> | Expandable extra information |
| Text content | Event title/description |
Full event with all features
<calendar-event data-category="meeting" data-duration="2h"> <time datetime="10:00">10:00</time> <icon-wc name="palette" size="sm"></icon-wc> Design review <details> <summary>Details</summary> <p>Conference Room A, review Q3 mockups.</p> </details></calendar-event>Category Colors
Each category sets a --event-color custom property that controls the left accent bar and background tint.
| Category | Color |
|---|---|
meeting | Primary (blue/interactive) |
deadline | Error (red) |
personal | Success (green) |
focus | Amber/olive |
Add custom categories via CSS: calendar-event[data-category="workshop"] { --event-color: purple; }
Related
<hour-view>— Container for events within an hour<day-view>— Full day schedule using these events