Atrium Loft
Floor 3 · 12 seats
Studio B
Floor 2 · 8 seats
Garden Room
Ground · 20 seats
Rooftop Deck
Level 5 · 40 seats
A Gantt-style day timeline: resource rows against an hour axis with time-positioned event bars (left/width computed from start/end), grid lines, a live 'now' marker, colored tones, and clickable bars with a hover tooltip showing the event and its time range. Ideal for room bookings, shifts, and resource scheduling.
The import and the props worth knowing about, in one place.
import { ScheduleTimeline } from "@/components/beste/component/schedule-timeline";
<ScheduleTimeline
dayStart={8}
dayEnd={18}
step={2}
nowAt={11.5}
rows={[
{
id: "loft",
label: "Atrium Loft",
sublabel: "Floor 3 · 12 seats",
events: [
{ id: "a1", label: "Planning sync", start: 9, end: 11, tone: "primary" },
{ id: "a2", label: "Design review", start: 14, end: 15.5, tone: "emerald" },
],
},
]}
onEventClick={(rowId, eventId) => console.log(rowId, eventId)}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
rows* | TimelineRow[] | — | |
dayStart | number | — | First hour on the axis (default 8) |
dayEnd | number | — | Last hour on the axis (default 18) |
step | number | — | Axis tick interval in hours (default 2) |
nowAt | number | — | Draw a "now" marker at this hour (omit to hide) |
onEventClick | (rowId: string, eventId: string) => void | — | |
className | string | — |
| Actions | ||||||
|---|---|---|---|---|---|---|
A Amara Okafor[email protected] | Scale | Active | $4,820 | Jan 4, 2026 | ||
D Diego Santos[email protected] | Starter | Trial | $0 | Feb 18, 2026 | ||
P Priya Nair[email protected] | Growth | Active | $2,140 | Nov 22, 2025 | ||
T Tom Fischer[email protected] | Starter | Churned | $380 | Aug 9, 2025 | ||
L Lena Björk[email protected] | Scale | Active | $6,390 | Mar 2, 2026 | ||
M Marcus Reed[email protected] | Starter | Trial | $0 | Feb 27, 2026 |
8 row(s)