day-view

Hour-grid schedule for a single day using calendar-event and hour-view elements with two-layer rendering for multi-hour spanning.

Overview

The <day-view> component renders a day schedule as an hour grid. Authors write semantic markup using <ol>, <time>, <hour-view>, and <calendar-event>. The component enhances this with a two-layer rendering system: CSS Grid for the hour layout, and JS absolute positioning for events that span multiple hours.

Markup Pattern

Each hour is an <li> containing a <time> label and an <hour-view> container. Events go inside <hour-view> as <calendar-event> elements.

Element	Purpose
`<ol>`	Ordered list of hour slots
`<li>`	One hour: contains `<time>` + `<hour-view>`
`<time datetime="HH:00">`	Hour label
`<hour-view>`	Subgrid container for events within the hour
`<calendar-event>`	Individual event with time, category, duration

Attributes

Attribute	Type	Default	Description
`data-date`	ISO date	—	The date this view represents.
`data-start-hour`	number	`7`	First visible hour.
`data-end-hour`	number	`19`	Last visible hour.

Half-Hour Events

Events starting at :30 are placed in the bottom half of their hour row using data-start="30".

Multi-Hour Events

Add data-duration to span across multiple hour rows. The component positions these events absolutely over the grid using measured coordinates.

Supported durations: 1h, 1h30m, 2h, 3h.

Leave the subsequent hour's <hour-view> empty — the spanning event overlays it visually.

Double-Booking

When two events occupy the same time slot, add data-overlap to the <hour-view> to display them side by side.

All-Day Events

Place all-day events in a <ul class="all-day-events"> above the hour list.

Events

Event	Detail	Description
`day-view:event-click`	`{ time, text, element, category, duration }`	Fired when a `<calendar-event>` is clicked.

Two-Layer Rendering

The component uses two rendering layers:

Layer	Mechanism	Handles
Grid	CSS Grid + subgrid	Hour rows, half-hour positioning, double-booking columns
Overlay	JS absolute positioning	Multi-hour spanning events (measured against grid rows)

Hour dividers use box-shadow instead of border to avoid gaps in the spanning calculations.

Progressive Enhancement

Layer	What renders
HTML only	Ordered list of hours with events — readable, semantic
+ CSS	Grid layout, category colors, half-hour positioning
+ JS	Multi-hour spanning, click events, keyboard navigation

Keyboard

Key	Action
`Arrow Down`	Move focus to next event
`Arrow Up`	Move focus to previous event

<calendar-event> — Event block element
<hour-view> — Hour container element
<calendar-wc> — Month calendar with events