Agenda List

Pro

Day-grouped agenda that follows the clock: past events fade back, the event in progress is highlighted as it runs, and a thin line marks the present moment and moves along with it.

Preview

Installation

npx @lumioui/cli add pro/agenda-list

Usage

import { relativeDay, AgendaList } from "@/components/ui/agenda-list/agenda-list";
<AgendaList />

Also exported: relativeDay.

Examples

Conference

A two-day conference programme pinned at 11:10 on day one: the talks already given sit dim, the sync talk in progress is lit by a teal wash a quarter across, and the now band sits before the panel.

Schedule

A personal calendar across four days on a live clock: what's over sits dim, the pairing session in progress fills with light as it runs, and a band of light marks now.

API reference

Prop Type Default
events* AgendaEvent[] —
days Date[]

Days to render, even when empty. Default: every day that has events.

 —
now Date

Pin the clock. Default: live, re-read once a minute.

 —
showNowLine boolean

Draw the now-line in today's section. Default true.

 true
onEventPress (event: AgendaEvent) => void

Row press.

 —
renderTrailing (event: AgendaEvent) => React.ReactNode

Trailing node per row (bookmark, owner avatar).

 —
formatDayTitle (day: Date, now: Date) => string

Section title. Default: relative day ("Today", "Tomorrow", "Saturday").

 relativeDay
emptyLabel string

Empty-day row text. Default "No events".

 "No events"
className string —