Kit parts
One day in hour rows, like a page of a desk diary. Each timed event stands on the rows by when it starts and how long it runs; events that overlap stand side by side and share the width. All-day events sit in a strip above the rows, and a Now line crosses at the time on the clock and moves with it. The first and last hour are options. Every event is a real key named with its time, so the day can be driven from the keyboard and read aloud.
Seats open in 11 days. Want one email that morning?
The rows are the timeline’s ruled hairlines with the spec list’s tabular figures down the left, and the Now line is the timeline’s pen in the dark cap’s colour. The tones are the lamp’s own four, set as a kit lamp before each event’s time, like the timeline’s tick, so the event faces are the kit’s neutral face. Everything is placed by a start and a length in minutes through custom properties, so the layout is a pure function the page can run on the server.
| Name | Kind | Description |
|---|---|---|
| label | attribute | The name of the day, which is the group’s accessible name. |
| hour-cycle | attribute | Whether the hours and the times are 09:00 or 9 am. |
| height | attribute | A day taller than this scrolls inside itself and opens with the Now line, or the first event, in view. |
| date | attribute | Which day it is. The Now line is drawn only when this is today; with no date it always is. |
| now | attribute | Holds the Now line at a time of day, for a specimen. Without it the line follows the clock. |
| data-start · data-end | item attribute | A timed event’s start and end ("24:00" for midnight). An event with no end runs an hour; one that would be shorter than half an hour is drawn that tall. |
| data-allday | item attribute | An event with no time: it goes in the strip above the rows. |
| data-id · data-tone · data-place | item attribute | The event’s key, the kit lamp set before its time (the only colour on it), and the place printed under its name. |
| events | property | Setting it redraws the day. |
| select(id) | method | Picks an event, or puts it down if it is the one picked. |
| layoutDay() · parseClock() · clockText() | function | Events to rows and columns (minutes in, columns out), “09:30” to minutes, and minutes to the clock’s text. |
| eventSays() · nowMinutes() · dayAgendaBody() · dayAgendaHTML() | function | What a screen reader says for an event, the minutes of a Date, and the day as markup for a server or a specimen. |
The three events at half past nine stand side by side. Tab reaches each in the order of the day; press the Down arrow to walk to the next, Enter to pick one. Change From and To to show a shorter or longer day. The Now line follows your clock; under reduced motion it steps once a minute.
An event log like the roll of a chart recorder. The rail is engraved down the plate and each event is a tick stamped across it, with its time in tabular figures and its words beside it. A lamp on the rail is the only colour, and a marker for the present separates what has happened from what is still to come.
A month on a plate. The month and year sit on two drums behind a window and roll when you page; the chosen day is a latched cap, a range is a groove cut between two caps, and events are lamps named in the line below.
The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.