KQ-562 · AGENDA/DAY
Agenda Day
A day drawn on its hours. Events arrive a step from the gutter in cascade order on glide, overlapping events share the column and re-divide it as one is moved out of the pile, and the now-line creeps down on drift from the now prop rather than the wall clock so the day renders the same on the server as in the browser. Dragging a block tracks the pointer 1:1 and settles onto its quarter hour on snap; Up and Down move the focused event a quarter hour, Page Up and Page Down an hour, and every move is announced.
Up and Down move the event a quarter hour, Page Up and Page Down an hour, Left and Right move between events.
Focus an event, then drag it or nudge it with the arrows
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/agenda-day
Props
- events
- { id: string; title: string; start: number; end: number; tint?: string }[]
- default —
- Minutes from the start of the day. Seeds the agenda, which owns positions after that and reports via onChange.
- hours
- [number, number]
- default [8, 18]
- Visible range as whole hours. Ten hours fit a 342px phone column without a scroll.
- now
- number
- default —
- Minutes for the now-line. Omit it, or send it out of range, and no line is drawn.
- onChange
- (events: AgendaEvent[]) => void
- default —
- Fires with the whole day after a drop or a keyboard nudge.
- onActiveChange
- (id: string | null) => void
- default —
- Fires with the focused event id, or null when focus leaves the day.
- label
- React.ReactNode
- default —
- Visible label. Omit it and pass aria-label to name the day invisibly.
| Prop | Type | Default | Description |
|---|---|---|---|
| events | { id: string; title: string; start: number; end: number; tint?: string }[] | — | Minutes from the start of the day. Seeds the agenda, which owns positions after that and reports via onChange. |
| hours | [number, number] | [8, 18] | Visible range as whole hours. Ten hours fit a 342px phone column without a scroll. |
| now | number | — | Minutes for the now-line. Omit it, or send it out of range, and no line is drawn. |
| onChange | (events: AgendaEvent[]) => void | — | Fires with the whole day after a drop or a keyboard nudge. |
| onActiveChange | (id: string | null) => void | — | Fires with the focused event id, or null when focus leaves the day. |
| label | React.ReactNode | — | Visible label. Omit it and pass aria-label to name the day invisibly. |