hour-view
CSS subgrid container for calendar events within a single hour slot. Provides half-hour positioning and double-booking layout.
Overview
The <hour-view> element is a CSS-only container that holds <calendar-event> elements within a single hour slot. It uses CSS subgrid to inherit its parent's two-row half-hour grid, allowing events to be placed at the top (:00) or bottom (:30) of the hour.
<li> <time datetime="09:00">9 AM</time> <hour-view> <calendar-event data-category="meeting"> <time datetime="09:00">9:00</time> Sprint standup </calendar-event> </hour-view></li>Half-Hour Positioning
Each <hour-view> provides two subgrid rows (top half and bottom half of the hour). Events at :00 go in row 1; events with data-start="30" go in row 2.
<hour-view> <calendar-event data-category="personal" data-start="30"> <time datetime="12:30">12:30</time> Lunch </calendar-event></hour-view>Double-Booking
Add data-overlap to display multiple events side by side when two events occupy the same time slot.
<hour-view data-overlap> <calendar-event data-category="focus"> <time datetime="14:00">2:00</time> Code review </calendar-event> <calendar-event data-category="meeting"> <time datetime="14:00">2:00</time> 1:1 with Sarah </calendar-event></hour-view>Without data-overlap, events stack vertically. With it, the grid switches to 1fr 1fr columns.
Attributes
| Attribute | Type | Description |
|---|---|---|
data-overlap |
boolean | Enable side-by-side layout for double-booked events. |
Empty Hours
Empty <hour-view> elements render as blank rows in the grid — this is correct behavior showing available time slots.
<li> <time datetime="15:00">3 PM</time> <hour-view></hour-view></li>Related
<calendar-event>— Event block placed inside hour-view<day-view>— Full day schedule containing hour-views