2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Tc7b9,"use client"; import { AnimatePresence, motion } from "motion/react"; import { ChevronLeft, ChevronRight, Clock, MapPin, Trash2 } from "lucide-react"; import { Popover as PopoverPrimitive } from "radix-ui"; import { useCallback, useEffect, useId, useMemo, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactNode, } from "react"; import { cn } from "@/lib/utils"; export type SchedulerView = "day" | "week" | "workweek" | "month" | "agenda"; export type EventColor = "gray" | "blue" | "green" | "amber" | "rose" | "violet"; export type SchedulerEvent = { id: string; title: string; start: Date; end: Date; allDay?: boolean; color?: EventColor; location?: string }; export type Resource = { id: string; name: string; subtitle?: string; avatar?: ReactNode }; export type ResourceEvent = SchedulerEvent & { resourceId: string }; const COLORS: Record = { gray: { block: "bg-neutral-100 text-neutral-900 dark:bg-white/[0.08] dark:text-neutral-100", bar: "bg-neutral-400", chip: "bg-neutral-500 text-white" }, blue: { block: "bg-sky-50 text-sky-950 dark:bg-sky-400/[0.14] dark:text-sky-50", bar: "bg-sky-500", chip: "bg-sky-500 text-white" }, green: { block: "bg-emerald-50 text-emerald-950 dark:bg-emerald-400/[0.14] dark:text-emerald-50", bar: "bg-emerald-500", chip: "bg-emerald-600 text-white" }, amber: { block: "bg-amber-50 text-amber-950 dark:bg-amber-400/[0.14] dark:text-amber-50", bar: "bg-amber-500", chip: "bg-amber-500 text-white" }, rose: { block: "bg-rose-50 text-rose-950 dark:bg-rose-400/[0.14] dark:text-rose-50", bar: "bg-rose-500", chip: "bg-rose-500 text-white" }, violet: { block: "bg-violet-50 text-violet-950 dark:bg-violet-400/[0.15] dark:text-violet-50", bar: "bg-violet-500", chip: "bg-violet-500 text-white" }, }; const SPRING = { type: "spring", bounce: 0.15, duration: 0.35 } as const; const VIEW_LABEL: Record = { day: "Day", week: "Week", workweek: "Work week", month: "Month", agenda: "Agenda" }; const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()); const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n, d.getHours(), d.getMinutes()); const addMinutes = (d: Date, n: number) => new Date(d.getTime() + n * 60000); const sameDay = (a: Date, b: Date) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); const startOfWeek = (d: Date, weekStartsOn: number) => addDays(startOfDay(d), -((d.getDay() - weekStartsOn + 7) % 7)); const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n)); const minutesFrom = (from: Date, d: Date) => Math.round((d.getTime() - from.getTime()) / 60000); function useNow(fixed?: Date) { const [now, setNow] = useState(fixed ?? null); useEffect(() => { if (fixed) return setNow(fixed); setNow(new Date()); const t = setInterval(() => setNow(new Date()), 60000); return () => clearInterval(t); }, [fixed]); return now; } function useControlled(value: T | undefined, initial: T, onChange?: (v: T) => void) { const [inner, setInner] = useState(initial); const current = value ?? inner; const set = useCallback( (v: T) => { if (value === undefined) setInner(v); onChange?.(v); }, [value, onChange], ); return [current, set] as const; } function formatters(locale: string) { const time = (d: Date) => d.toLocaleTimeString(locale, { hour: "numeric", minute: d.getMinutes() ? "2-digit" : undefined }); const range = (a: Date, b: Date) => `${time(a)} – ${time(b)}`; const hour = (h: number) => new Date(2000, 0, 1, h).toLocaleTimeString(locale, { hour: "numeric" }); return { time, range, hour }; } type Placed = { e: SchedulerEvent; s: number; f: number; col: number; cols: number }; function layoutDay(events: SchedulerEvent[], day: Date): Placed[] { const from = startOfDay(day); const to = addDays(from, 1); const items = events .filter((e) => !e.allDay && sameDay(e.start, addMinutes(e.end, -1)) && e.start < to && e.end > from) .map((e) => ({ e, s: Math.max(0, minutesFrom(from, e.start)), f: Math.min(1440, minutesFrom(from, e.end)), col: 0, cols: 1 })) .sort((a, b) => a.s - b.s || b.f - a.f); const out: Placed[] = []; let cluster: Placed[] = []; let columns: number[] = []; let clusterEnd = -1; const flush = () => { cluster.forEach((c) => (c.cols = columns.length)); cluster = []; columns = []; }; for (const it of items) { if (it.s >= clusterEnd) { flush(); clusterEnd = -1; } let col = columns.findIndex((end) => end <= it.s); if (col === -1) { col = columns.length; columns.push(it.f); } else columns[col] = it.f; it.col = col; cluster.push(it); clusterEnd = Math.max(clusterEnd, it.f); out.push(it); } flush(); return out; } function lanes(items: T[]) { const ends: number[] = []; return items .sort((a, b) => a.s - b.s) .map((it) => { let lane = ends.findIndex((end) => end <= it.s); if (lane === -1) lane = ends.push(it.f) - 1; else ends[lane] = it.f; return { ...it, lane }; }); } interface DetailsProps { event: SchedulerEvent; editable: boolean; locale: string; autoFocus?: boolean; onChange: (event: SchedulerEvent) => void; onDelete: () => void; } function EventDetails({ event, editable, locale, autoFocus, onChange, onDelete }: DetailsProps) { const f = formatters(locale); const color = event.color ?? "blue"; const day = event.start.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric" }); return (

{editable ? ( autoFocus && e.currentTarget.select()} value={event.title} onChange={(e) => onChange({ ...event, title: e.target.value })} aria-label="Event title" className="-my-0.5 min-w-0 flex-1 rounded-[6px] bg-transparent px-1 py-0.5 text-[14px] font-semibold text-neutral-950 outline-none transition-colors hover:bg-neutral-950/[0.04] focus:bg-neutral-950/[0.05] dark:text-white dark:hover:bg-white/[0.06] dark:focus:bg-white/[0.08]" /> ) : (

{event.title}

)}

{event.allDay ? `${day} · All day` : `${day} · ${f.range(event.start, event.end)}`}

{event.location && (

{event.location}

)} {editable && (

{(Object.keys(COLORS) as EventColor[]).map((c) => (

)}

); } function EventPopover({ open, onOpenChange, children, content, side = "right" }: { open: boolean; onOpenChange: (o: boolean) => void; children: ReactNode; content: ReactNode; side?: "right" | "bottom" }) { return ( {children} {open && ( e.preventDefault()}> {content} )} ); } export interface SchedulerProps { events: SchedulerEvent[]; /** Pass it to let people create, move, resize, edit and delete events. */ onEventsChange?: (events: SchedulerEvent[]) => void; view?: SchedulerView; defaultView?: SchedulerView; onViewChange?: (view: SchedulerView) => void; /** The views offered in the toolbar; an empty list hides the switcher. */ views?: SchedulerView[]; date?: Date; defaultDate?: Date; onDateChange?: (date: Date) => void; /** 0 for Sunday, 1 for Monday (default). */ weekStartsOn?: 0 | 1; /** The hours the time grid covers, and the hour it scrolls to first. */ startHour?: number; endHour?: number; scrollToHour?: number; hourHeight?: number; /** Minutes that drags snap to. */ snap?: number; /** A fixed "now" for demos and tests; otherwise the clock, updated each minute. */ now?: Date; locale?: string; /** Extra controls at the right of the toolbar, e.g. a New event button. */ actions?: ReactNode; /** Controls at the left of the toolbar, e.g. a sidebar toggle. */ leading?: ReactNode; /** Title for a new event made by clicking or dragging on the grid. */ newEventTitle?: string; className?: string; } /** * A calendar for one day, a week, a work week, a month or an agenda. With onEventsChange, drag on the grid * to create, drag an event to move it (across days too), drag its bottom edge to resize, and click it to * edit. Alt + arrows move a focused event; Alt + Shift + arrows resize it. */ export function Scheduler({ events, onEventsChange, view: viewProp, defaultView = "week", onViewChange, views = ["day", "week", "month", "agenda"], date: dateProp, defaultDate, onDateChange, weekStartsOn = 1, startHour = 0, endHour = 24, scrollToHour = 8, hourHeight = 48, snap = 15, now: nowProp, locale = "en-US", actions, leading, newEventTitle = "New event", className, }: SchedulerProps) { const [view, setView] = useControlled(viewProp, defaultView, onViewChange); const [date, setDate] = useControlled(dateProp, defaultDate ?? startOfDay(new Date()), onDateChange); const [openId, setOpenId] = useState(null); const [fresh, setFresh] = useState(null); const uid = useId(); const editable = !!onEventsChange; const step = (dir: number) => { if (view === "month") setDate(new Date(date.getFullYear(), date.getMonth() + dir, 1)); else setDate(addDays(date, view === "day" ? dir : 7 * dir)); }; const title = useMemo(() => { if (view === "day") return date.toLocaleDateString(locale, { weekday: "long", month: "long", day: "numeric" }); if (view === "month") return date.toLocaleDateString(locale, { month: "long", year: "numeric" }); if (view === "agenda") return `From ${date.toLocaleDateString(locale, { month: "short", day: "numeric" })}`; const first = startOfWeek(date, view === "workweek" ? 1 : weekStartsOn); const last = addDays(first, view === "workweek" ? 4 : 6); const sameMonth = first.getMonth() === last.getMonth(); return `${first.toLocaleDateString(locale, { month: "short", day: "numeric" })} – ${last.toLocaleDateString(locale, sameMonth ? { day: "numeric" } : { month: "short", day: "numeric" })}, ${last.getFullYear()}`; }, [view, date, locale, weekStartsOn]); const update = (next: SchedulerEvent) => onEventsChange?.(events.map((e) => (e.id === next.id ? next : e))); const remove = (id: string) => { onEventsChange?.(events.filter((e) => e.id !== id)); setOpenId(null); }; const create = (start: Date, end: Date, allDay = false) => { const id = `ev-${Date.now().toString(36)}`; onEventsChange?.([...events, { id, title: newEventTitle, start, end, allDay, color: "blue" }]); setFresh(id); setOpenId(id); }; const details = (e: SchedulerEvent) => remove(e.id)} />; const popover = { openId, setOpenId: (id: string | null) => (setOpenId(id), id === null && setFresh(null)), details }; return (

{leading}

{[-1, 1].map((dir) => ( ))}

{title}

{actions} {views.length > 1 && (

{views.map((v) => ( ))}

)}

{view === "month" ? ( (setDate(d), views.includes("day") && setView("day"))} now={nowProp} /> ) : view === "agenda" ? ( ) : ( addDays(startOfWeek(date, view === "workweek" ? 1 : weekStartsOn), i))} events={events} editable={editable} onCommit={update} onCreate={create} startHour={startHour} endHour={endHour} scrollToHour={scrollToHour} hourHeight={hourHeight} snap={snap} now={nowProp} locale={locale} popover={popover} onPickDay={views.includes("day") && view !== "day" ? (d) => (setDate(d), setView("day")) : undefined} /> )}

); } type PopoverCtl = { openId: string | null; setOpenId: (id: string | null) => void; details: (e: SchedulerEvent) => ReactNode }; type Drag = { kind: "create" | "move" | "resize"; id: string; x: number; y: number; day: number; minute: number; base?: SchedulerEvent; moved: boolean }; interface TimeGridProps { days: Date[]; events: SchedulerEvent[]; editable: boolean; onCommit: (e: SchedulerEvent) => void; onCreate: (start: Date, end: Date, allDay?: boolean) => void; startHour: number; endHour: number; scrollToHour: number; hourHeight: number; snap: number; now?: Date; locale: string; popover: PopoverCtl; onPickDay?: (d: Date) => void; } function TimeGrid({ days, events, editable, onCommit, onCreate, startHour, endHour, scrollToHour, hourHeight, snap, now: nowProp, locale, popover, onPickDay }: TimeGridProps) { const scroller = useRef(null); const columns = useRef(null); const drag = useRef(null); const [ghost, setGhostState] = useState(null); const ghostRef = useRef(null); const setGhost = (g: SchedulerEvent | null) => { ghostRef.current = g; setGhostState(g); }; const now = useNow(nowProp); const f = formatters(locale); const hours = Array.from({ length: endHour - startHour }, (_, i) => startHour + i); const height = hours.length * hourHeight; useEffect(() => { if (scroller.current) scroller.current.scrollTop = Math.max(0, (scrollToHour - startHour) * hourHeight - 8); }, [scrollToHour, startHour, hourHeight]); const shown = useMemo(() => { if (!ghost) return events; return events.some((e) => e.id === ghost.id) ? events.map((e) => (e.id === ghost.id ? ghost : e)) : [...events, ghost]; }, [events, ghost]); const allDay = useMemo(() => { const first = days[0]; const after = addDays(days[days.length - 1], 1); const spans = shown .filter((e) => (e.allDay || !sameDay(e.start, addMinutes(e.end, -1))) && e.start < after && e.end > first) .map((e) => ({ e, s: clamp(Math.floor(minutesFrom(first, e.start) / 1440), 0, days.length - 1), f: clamp(Math.ceil(minutesFrom(first, e.end) / 1440), 1, days.length) })); return lanes(spans); }, [shown, days]); const allDayRows = allDay.reduce((n, a) => Math.max(n, a.lane + 1), 0); const at = (clientX: number, clientY: number) => { const rect = columns.current!.getBoundingClientRect(); const day = clamp(Math.floor(((clientX - rect.left) / rect.width) * days.length), 0, days.length - 1); const minute = clamp(startHour * 60 + ((clientY - rect.top) / hourHeight) * 60, startHour * 60, endHour * 60); return { day, minute }; }; const snapped = (m: number) => Math.round(m / snap) * snap; const onPointerDown = (e: ReactPointerEvent) => { if (e.button !== 0) return; const target = e.target as HTMLElement; const el = target.closest("[data-event-id]"); if (popover.openId && !el) { popover.setOpenId(null); return; } const { day, minute } = at(e.clientX, e.clientY); if (el) { const base = events.find((ev) => ev.id === el.dataset.eventId); if (!base) return; drag.current = { kind: editable && target.closest("[data-resize]") ? "resize" : "move", id: base.id, x: e.clientX, y: e.clientY, day, minute, base, moved: false }; } else if (editable) { drag.current = { kind: "create", id: "__new", x: e.clientX, y: e.clientY, day, minute: Math.floor(minute / snap) * snap, moved: false }; } else return; e.currentTarget.setPointerCapture(e.pointerId); }; const onPointerMove = (e: ReactPointerEvent) => { const d = drag.current; if (!d) return; if (!d.moved && Math.hypot(e.clientX - d.x, e.clientY - d.y) < 4) return; if (!d.moved && d.kind !== "create" && !editable) return; d.moved = true; const { day, minute } = at(e.clientX, e.clientY); if (d.kind === "create") { const a = d.minute; const b = Math.max(snapped(minute), 0); const from = Math.min(a, b); const to = Math.max(a + snap, b); const base = days[d.day]; setGhost({ id: "__new", title: "", start: addMinutes(base, from), end: addMinutes(base, to), color: "blue" }); } else if (d.kind === "move" && d.base) { const delta = snapped(minute - d.minute); const dd = day - d.day; setGhost({ ...d.base, start: addMinutes(addDays(d.base.start, dd), delta), end: addMinutes(addDays(d.base.end, dd), delta) }); } else if (d.kind === "resize" && d.base) { const end = addMinutes(d.base.end, snapped(minute - d.minute)); setGhost({ ...d.base, end: end.getTime() - d.base.start.getTime() < snap * 60000 ? addMinutes(d.base.start, snap) : end }); } }; const onPointerUp = () => { const d = drag.current; drag.current = null; if (!d) return; if (!d.moved) { if (d.kind === "create") { const base = days[d.day]; onCreate(addMinutes(base, d.minute), addMinutes(base, d.minute + 60)); } else popover.setOpenId(d.id); setGhost(null); return; } const g = ghostRef.current; if (g) { if (d.kind === "create") onCreate(g.start, g.end); else onCommit(g); } setGhost(null); }; const onKeyDown = (e: ReactKeyboardEvent, ev: SchedulerEvent) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); popover.setOpenId(ev.id); return; } if (!editable || !e.altKey) return; const moves: Record = { ArrowUp: [0, -snap], ArrowDown: [0, snap], ArrowLeft: [-1, 0], ArrowRight: [1, 0] }; const m = moves[e.key]; if (!m) return; e.preventDefault(); if (e.shiftKey && m[0] === 0) { const end = addMinutes(ev.end, m[1]); if (end > ev.start) onCommit({ ...ev, end }); } else onCommit({ ...ev, start: addMinutes(addDays(ev.start, m[0]), m[1]), end: addMinutes(addDays(ev.end, m[0]), m[1]) }); }; const todayIndex = now ? days.findIndex((d) => sameDay(d, now)) : -1; const nowTop = now ? ((now.getHours() * 60 + now.getMinutes() - startHour * 60) / 60) * hourHeight : -1; const cols = `56px repeat(${days.length}, minmax(0, 1fr))`; return (

{days.map((d) => { const today = now && sameDay(d, now); const Tag = onPickDay ? "button" : "div"; return ( onPickDay(d) } : {})} className="flex h-12 min-w-0 flex-col items-center justify-center gap-0.5 outline-none" > {d.toLocaleDateString(locale, { weekday: "short" })} {d.getDate()} ); })}

{allDayRows > 0 && (

All day {allDay.map(({ e, s, f: fin, lane }) => ( popover.setOpenId(o ? e.id : null)} content={popover.details(e)} side="bottom"> ))}

)}

{hours.slice(1).map((h, i) => ( {f.hour(h)} ))} {todayIndex >= 0 && nowTop >= 0 && nowTop <= height && ( {f.time(now!)} )}

((drag.current = null), setGhost(null))} className={cn("relative grid touch-none select-none", editable && "cursor-crosshair")} style={{ gridColumn: `2 / span ${days.length}`, gridTemplateColumns: `repeat(${days.length}, minmax(0, 1fr))`, height, backgroundImage: `repeating-linear-gradient(to bottom, transparent 0, transparent ${hourHeight - 1}px, var(--grid-line) ${hourHeight - 1}px, var(--grid-line) ${hourHeight}px)`, }} > {days.map((d, i) => (

{layoutDay(shown, d).map(({ e, s, f: fin, col, cols: n }) => { const top = ((s - startHour * 60) / 60) * hourHeight; const h = Math.max(((fin - s) / 60) * hourHeight - 2, 18); const dragging = ghost?.id === e.id; const short = h < 40; return ( popover.setOpenId(o ? e.id : null)} content={popover.details(e)}> onKeyDown(k, e)} className={cn( "group absolute overflow-hidden rounded-[8px] pl-2.5 pr-1.5 text-left outline-none ring-1 ring-white transition-shadow focus-visible:ring-2 focus-visible:ring-neutral-950/40 dark:ring-neutral-900 dark:focus-visible:ring-white/50", COLORS[e.color ?? "blue"].block, dragging ? "z-10 cursor-grabbing shadow-[0_12px_28px_-8px_rgb(0_0_0/0.3)]" : editable ? "cursor-grab" : "cursor-pointer", short ? "flex items-center gap-1.5 py-0" : "py-1", )} style={{ top, height: h, left: `calc(${(col / n) * 100}% + 2px)`, width: `calc(${100 / n}% - 4px)` }} >

{e.title || "New event"}

{f.range(e.start, e.end)}

{!short && e.location &&

{e.location}

} {editable && e.id !== "__new" && } ); })} {i === todayIndex && nowTop >= 0 && nowTop <= height && (

)}

))}

); } function MonthGrid({ events, date, weekStartsOn, locale, popover, onPickDay, now: nowProp }: { events: SchedulerEvent[]; date: Date; weekStartsOn: number; locale: string; popover: PopoverCtl; onPickDay: (d: Date) => void; now?: Date }) { const now = useNow(nowProp); const f = formatters(locale); const first = new Date(date.getFullYear(), date.getMonth(), 1); const start = startOfWeek(first, weekStartsOn); const cells = Array.from({ length: 42 }, (_, i) => addDays(start, i)); const [more, setMore] = useState(null); return (

{cells.slice(0, 7).map((d) => ( {d.toLocaleDateString(locale, { weekday: "short" })} ))}

{cells.map((d) => { const list = events .filter((e) => e.start < addDays(d, 1) && e.end > d) .sort((a, b) => Number(!!b.allDay) - Number(!!a.allDay) || a.start.getTime() - b.start.getTime()); const inMonth = d.getMonth() === date.getMonth(); const today = now && sameDay(d, now); const key = d.toISOString(); const visible = list.slice(0, list.length > 3 ? 2 : 3); return (

{visible.map((e) => ( popover.setOpenId(o ? `${key}:${e.id}` : null)} content={popover.details(e)}> ))} {list.length > visible.length && ( setMore(o ? key : null)}> +{list.length - visible.length} more

{d.toLocaleDateString(locale, { weekday: "long", month: "short", day: "numeric" })}

{list.map((e) => (

{e.title} {e.allDay ? "All day" : f.time(e.start)}

))} )}

); })}

); } function Agenda({ events, date, locale, popover }: { events: SchedulerEvent[]; date: Date; locale: string; popover: PopoverCtl }) { const now = useNow(); const f = formatters(locale); const from = startOfDay(date); const days = Array.from({ length: 21 }, (_, i) => addDays(from, i)) .map((d) => ({ d, list: events.filter((e) => e.start < addDays(d, 1) && e.end > d).sort((a, b) => Number(!!b.allDay) - Number(!!a.allDay) || a.start.getTime() - b.start.getTime()) })) .filter((x) => x.list.length); return (

{days.length === 0 &&

Nothing in the next three weeks.

} {days.map(({ d, list }) => { const today = now && sameDay(d, now); return (

{d.getDate()}

{today ? "Today" : d.toLocaleDateString(locale, { weekday: "short" })} · {d.toLocaleDateString(locale, { month: "short" })}

popover.setOpenId(o ? id : null)} content={popover.details(e)} side="bottom">

); })}

); } type RDrag = { kind: "create" | "move" | "resize"; id: string; x: number; y: number; row: number; minute: number; base?: ResourceEvent; moved: boolean }; export interface ResourceTimelineProps { resources: Resource[]; events: ResourceEvent[]; onEventsChange?: (events: ResourceEvent[]) => void; /** The day shown. */ date: Date; startHour?: number; endHour?: number; hourWidth?: number; rowHeight?: number; snap?: number; now?: Date; locale?: string; /** Heading over the resource column, e.g. Team or Rooms. */ label?: ReactNode; newEventTitle?: string; className?: string; } /** One row per person or room with the hours running across: drag on a row to book, drag a booking to move it in time or to another row, and drag its right edge to resize. */ export function ResourceTimeline({ resources, events, onEventsChange, date, startHour = 8, endHour = 20, hourWidth = 88, rowHeight = 56, snap = 15, now: nowProp, locale = "en-US", label = "Team", newEventTitle = "New booking", className, }: ResourceTimelineProps) { const tracks = useRef(null); const drag = useRef(null); const [ghost, setGhostState] = useState(null); const ghostRef = useRef(null); const setGhost = (g: ResourceEvent | null) => { ghostRef.current = g; setGhostState(g); }; const [openId, setOpenId] = useState(null); const [fresh, setFresh] = useState(null); const now = useNow(nowProp); const f = formatters(locale); const day = startOfDay(date); const editable = !!onEventsChange; const hours = Array.from({ length: endHour - startHour }, (_, i) => startHour + i); const width = hours.length * hourWidth; const shown = ghost ? (events.some((e) => e.id === ghost.id) ? events.map((e) => (e.id === ghost.id ? ghost : e)) : [...events, ghost]) : events; const at = (clientX: number, clientY: number) => { const rect = tracks.current!.getBoundingClientRect(); return { row: clamp(Math.floor((clientY - rect.top) / rowHeight), 0, resources.length - 1), minute: clamp(startHour * 60 + ((clientX - rect.left) / hourWidth) * 60, startHour * 60, endHour * 60), }; }; const snapped = (m: number) => Math.round(m / snap) * snap; const update = (next: ResourceEvent) => onEventsChange?.(events.map((e) => (e.id === next.id ? next : e))); const create = (resourceId: string, start: Date, end: Date) => { const id = `bk-${Date.now().toString(36)}`; onEventsChange?.([...events, { id, resourceId, title: newEventTitle, start, end, color: "blue" }]); setFresh(id); setOpenId(id); }; const onPointerDown = (e: ReactPointerEvent) => { if (e.button !== 0) return; const target = e.target as HTMLElement; const el = target.closest("[data-event-id]"); if (openId && !el) { setOpenId(null); setFresh(null); return; } const { row, minute } = at(e.clientX, e.clientY); if (el) { const base = events.find((ev) => ev.id === el.dataset.eventId); if (!base) return; drag.current = { kind: editable && target.closest("[data-resize]") ? "resize" : "move", id: base.id, x: e.clientX, y: e.clientY, row, minute, base, moved: false }; } else if (editable) drag.current = { kind: "create", id: "__new", x: e.clientX, y: e.clientY, row, minute: Math.floor(minute / snap) * snap, moved: false }; else return; e.currentTarget.setPointerCapture(e.pointerId); }; const onPointerMove = (e: ReactPointerEvent) => { const d = drag.current; if (!d || !editable) return; if (!d.moved && Math.hypot(e.clientX - d.x, e.clientY - d.y) < 4) return; d.moved = true; const { row, minute } = at(e.clientX, e.clientY); if (d.kind === "create") { const b = snapped(minute); setGhost({ id: "__new", resourceId: resources[d.row].id, title: "", start: addMinutes(day, Math.min(d.minute, b)), end: addMinutes(day, Math.max(d.minute + snap, b)), color: "blue" }); } else if (d.kind === "move" && d.base) { const delta = snapped(minute - d.minute); setGhost({ ...d.base, resourceId: resources[row].id, start: addMinutes(d.base.start, delta), end: addMinutes(d.base.end, delta) }); } else if (d.kind === "resize" && d.base) { const end = addMinutes(d.base.end, snapped(minute - d.minute)); setGhost({ ...d.base, end: end.getTime() - d.base.start.getTime() < snap * 60000 ? addMinutes(d.base.start, snap) : end }); } }; const onPointerUp = () => { const d = drag.current; drag.current = null; if (!d) return; if (!d.moved) { if (d.kind === "create") create(resources[d.row].id, addMinutes(day, d.minute), addMinutes(day, d.minute + 60)); else setOpenId(d.id); } else if (ghostRef.current) { const g = ghostRef.current; if (d.kind === "create") create(g.resourceId, g.start, g.end); else update(g); } setGhost(null); }; const nowLeft = now && sameDay(now, day) ? ((now.getHours() * 60 + now.getMinutes() - startHour * 60) / 60) * hourWidth : -1; return (

{label}

{hours.map((h) => ( {f.hour(h)} ))}

{resources.map((r) => (

{r.avatar} {r.name} {r.subtitle && {r.subtitle}}

))}

((drag.current = null), setGhost(null))} className={cn("relative touch-none select-none [--grid-line:rgb(0_0_0/0.06)] dark:[--grid-line:rgb(255_255_255/0.07)]", editable && "cursor-crosshair")} style={{ width, backgroundImage: `repeating-linear-gradient(to right, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent ${hourWidth}px)` }} > {resources.map((r) => { const placed = lanes( shown .filter((e) => e.resourceId === r.id && sameDay(e.start, day)) .map((e) => ({ e, s: minutesFrom(day, e.start), f: minutesFrom(day, e.end) })), ); const count = placed.reduce((n, p) => Math.max(n, p.lane + 1), 1); const laneH = (rowHeight - 10) / count; return (

{placed.map(({ e, s, f: fin, lane }) => { const dragging = ghost?.id === e.id; const color = e.color ?? "blue"; return ( (setOpenId(o ? e.id : null), !o && setFresh(null))} side="bottom" content={ update(n as ResourceEvent)} onDelete={() => (onEventsChange?.(events.filter((x) => x.id !== e.id)), setOpenId(null))} /> } > (k.key === "Enter" || k.key === " ") && (k.preventDefault(), setOpenId(e.id))} className={cn( "absolute flex min-w-0 flex-col justify-center overflow-hidden rounded-[8px] pl-2.5 pr-2 outline-none focus-visible:ring-2 focus-visible:ring-neutral-950/40 dark:focus-visible:ring-white/50", COLORS[color].block, dragging ? "z-10 cursor-grabbing shadow-[0_12px_28px_-8px_rgb(0_0_0/0.3)]" : editable ? "cursor-grab" : "cursor-pointer", )} style={{ left: ((s - startHour * 60) / 60) * hourWidth + 2, width: Math.max(((fin - s) / 60) * hourWidth - 4, 20), top: 5 + lane * laneH, height: laneH - 2 }} > {e.title || newEventTitle} {laneH > 34 && {f.range(e.start, e.end)}} {editable && e.id !== "__new" && } ); })}

); })} {nowLeft >= 0 && nowLeft <= width && (

)}

); } export default Scheduler; 2e:T8671a,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { ChevronLeft, ChevronRight, Clock, MapPin, Trash2 } from "lucide-react";
import { Popover as PopoverPrimitive } from "radix-ui";
import {
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type KeyboardEvent as ReactKeyboardEvent,
  type PointerEvent as ReactPointerEvent,
  type ReactNode,
} from "react";
import { cn } from "@/lib/utils";

export type SchedulerView = "day" | "week" | "workweek" | "month" | "agenda";
export type EventColor = "gray" | "blue" | "green" | "amber" | "rose" | "violet";
export type SchedulerEvent = { id: string; title: string; start: Date; end: Date; allDay?: boolean; color?: EventColor; location?: string };
export type Resource = { id: string; name: string; subtitle?: string; avatar?: ReactNode };
export type ResourceEvent = SchedulerEvent & { resourceId: string };

const COLORS: Record<EventColor, { block: string; bar: string; chip: string }> = {
  gray: { block: "bg-neutral-100 text-neutral-900 dark:bg-white/[0.08] dark:text-neutral-100", bar: "bg-neutral-400", chip: "bg-neutral-500 text-white" },
  blue: { block: "bg-sky-50 text-sky-950 dark:bg-sky-400/[0.14] dark:text-sky-50", bar: "bg-sky-500", chip: "bg-sky-500 text-white" },
  green: { block: "bg-emerald-50 text-emerald-950 dark:bg-emerald-400/[0.14] dark:text-emerald-50", bar: "bg-emerald-500", chip: "bg-emerald-600 text-white" },
  amber: { block: "bg-amber-50 text-amber-950 dark:bg-amber-400/[0.14] dark:text-amber-50", bar: "bg-amber-500", chip: "bg-amber-500 text-white" },
  rose: { block: "bg-rose-50 text-rose-950 dark:bg-rose-400/[0.14] dark:text-rose-50", bar: "bg-rose-500", chip: "bg-rose-500 text-white" },
  violet: { block: "bg-violet-50 text-violet-950 dark:bg-violet-400/[0.15] dark:text-violet-50", bar: "bg-violet-500", chip: "bg-violet-500 text-white" },
};

const SPRING = { type: "spring", bounce: 0.15, duration: 0.35 } as const;
const VIEW_LABEL: Record<SchedulerView, string> = { day: "Day", week: "Week", workweek: "Work week", month: "Month", agenda: "Agenda" };

const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n, d.getHours(), d.getMinutes());
const addMinutes = (d: Date, n: number) => new Date(d.getTime() + n * 60000);
const sameDay = (a: Date, b: Date) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
const startOfWeek = (d: Date, weekStartsOn: number) => addDays(startOfDay(d), -((d.getDay() - weekStartsOn + 7) % 7));
const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
const minutesFrom = (from: Date, d: Date) => Math.round((d.getTime() - from.getTime()) / 60000);

function useNow(fixed?: Date) {
  const [now, setNow] = useState<Date | null>(fixed ?? null);
  useEffect(() => {
    if (fixed) return setNow(fixed);
    setNow(new Date());
    const t = setInterval(() => setNow(new Date()), 60000);
    return () => clearInterval(t);
  }, [fixed]);
  return now;
}

function useControlled<T>(value: T | undefined, initial: T, onChange?: (v: T) => void) {
  const [inner, setInner] = useState(initial);
  const current = value ?? inner;
  const set = useCallback(
    (v: T) => {
      if (value === undefined) setInner(v);
      onChange?.(v);
    },
    [value, onChange],
  );
  return [current, set] as const;
}

function formatters(locale: string) {
  const time = (d: Date) => d.toLocaleTimeString(locale, { hour: "numeric", minute: d.getMinutes() ? "2-digit" : undefined });
  const range = (a: Date, b: Date) => `${time(a)} – ${time(b)}`;
  const hour = (h: number) => new Date(2000, 0, 1, h).toLocaleTimeString(locale, { hour: "numeric" });
  return { time, range, hour };
}

type Placed = { e: SchedulerEvent; s: number; f: number; col: number; cols: number };

function layoutDay(events: SchedulerEvent[], day: Date): Placed[] {
  const from = startOfDay(day);
  const to = addDays(from, 1);
  const items = events
    .filter((e) => !e.allDay && sameDay(e.start, addMinutes(e.end, -1)) && e.start < to && e.end > from)
    .map((e) => ({ e, s: Math.max(0, minutesFrom(from, e.start)), f: Math.min(1440, minutesFrom(from, e.end)), col: 0, cols: 1 }))
    .sort((a, b) => a.s - b.s || b.f - a.f);
  const out: Placed[] = [];
  let cluster: Placed[] = [];
  let columns: number[] = [];
  let clusterEnd = -1;
  const flush = () => {
    cluster.forEach((c) => (c.cols = columns.length));
    cluster = [];
    columns = [];
  };
  for (const it of items) {
    if (it.s >= clusterEnd) {
      flush();
      clusterEnd = -1;
    }
    let col = columns.findIndex((end) => end <= it.s);
    if (col === -1) {
      col = columns.length;
      columns.push(it.f);
    } else columns[col] = it.f;
    it.col = col;
    cluster.push(it);
    clusterEnd = Math.max(clusterEnd, it.f);
    out.push(it);
  }
  flush();
  return out;
}

function lanes<T extends { s: number; f: number }>(items: T[]) {
  const ends: number[] = [];
  return items
    .sort((a, b) => a.s - b.s)
    .map((it) => {
      let lane = ends.findIndex((end) => end <= it.s);
      if (lane === -1) lane = ends.push(it.f) - 1;
      else ends[lane] = it.f;
      return { ...it, lane };
    });
}

interface DetailsProps {
  event: SchedulerEvent;
  editable: boolean;
  locale: string;
  autoFocus?: boolean;
  onChange: (event: SchedulerEvent) => void;
  onDelete: () => void;
}

function EventDetails({ event, editable, locale, autoFocus, onChange, onDelete }: DetailsProps) {
  const f = formatters(locale);
  const color = event.color ?? "blue";
  const day = event.start.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric" });
  return (
    <div className="flex w-[264px] flex-col gap-2.5 p-3">
      <div className="flex items-start gap-2.5">
        <span className={cn("mt-1 size-3 shrink-0 rounded-[4px]", COLORS[color].bar)} />
        {editable ? (
          <input
            autoFocus={autoFocus}
            onFocus={(e) => autoFocus && e.currentTarget.select()}
            value={event.title}
            onChange={(e) => onChange({ ...event, title: e.target.value })}
            aria-label="Event title"
            className="-my-0.5 min-w-0 flex-1 rounded-[6px] bg-transparent px-1 py-0.5 text-[14px] font-semibold text-neutral-950 outline-none transition-colors hover:bg-neutral-950/[0.04] focus:bg-neutral-950/[0.05] dark:text-white dark:hover:bg-white/[0.06] dark:focus:bg-white/[0.08]"
          />
        ) : (
          <p className="min-w-0 flex-1 text-[14px] font-semibold text-neutral-950 dark:text-white">{event.title}</p>
        )}
      </div>
      <p className="flex items-center gap-2 text-[12.5px] text-neutral-600 dark:text-neutral-400">
        <Clock className="size-3.5 shrink-0 text-neutral-400" />
        {event.allDay ? `${day} · All day` : `${day} · ${f.range(event.start, event.end)}`}
      </p>
      {event.location && (
        <p className="flex items-center gap-2 text-[12.5px] text-neutral-600 dark:text-neutral-400">
          <MapPin className="size-3.5 shrink-0 text-neutral-400" />
          {event.location}
        </p>
      )}
      {editable && (
        <div className="mt-1 flex items-center gap-1.5 border-t border-black/[0.06] pt-2.5 dark:border-white/[0.08]">
          {(Object.keys(COLORS) as EventColor[]).map((c) => (
            <button
              key={c}
              type="button"
              aria-label={c}
              aria-pressed={color === c}
              onClick={() => onChange({ ...event, color: c })}
              className={cn("size-4 rounded-full transition-transform hover:scale-110", COLORS[c].bar, color === c && "ring-2 ring-neutral-950/70 ring-offset-2 ring-offset-white dark:ring-white/80 dark:ring-offset-neutral-900")}
            />
          ))}
          <button
            type="button"
            onClick={onDelete}
            className="ml-auto flex h-7 items-center gap-1.5 rounded-[8px] px-2 text-[12px] font-medium text-neutral-500 transition-colors hover:bg-rose-500/10 hover:text-rose-600 dark:hover:text-rose-400"
          >
            <Trash2 className="size-3.5" />
            Delete
          </button>
        </div>
      )}
    </div>
  );
}

function EventPopover({ open, onOpenChange, children, content, side = "right" }: { open: boolean; onOpenChange: (o: boolean) => void; children: ReactNode; content: ReactNode; side?: "right" | "bottom" }) {
  return (
    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
      <PopoverPrimitive.Anchor asChild>{children}</PopoverPrimitive.Anchor>
      <AnimatePresence>
        {open && (
          <PopoverPrimitive.Portal forceMount>
            <PopoverPrimitive.Content forceMount asChild side={side} align="start" sideOffset={8} collisionPadding={12} onOpenAutoFocus={(e) => e.preventDefault()}>
              <motion.div
                initial={{ opacity: 0, scale: 0.96 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.1 } }}
                transition={{ type: "spring", bounce: 0.2, duration: 0.3 }}
                className="z-50 origin-(--radix-popover-content-transform-origin) rounded-[14px] bg-white text-neutral-950 shadow-[0_16px_40px_-12px_rgb(0_0_0/0.25),0_2px_6px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06] outline-none dark:bg-neutral-900 dark:text-white dark:ring-white/[0.1]"
              >
                {content}
              </motion.div>
            </PopoverPrimitive.Content>
          </PopoverPrimitive.Portal>
        )}
      </AnimatePresence>
    </PopoverPrimitive.Root>
  );
}

export interface SchedulerProps {
  events: SchedulerEvent[];
  /** Pass it to let people create, move, resize, edit and delete events. */
  onEventsChange?: (events: SchedulerEvent[]) => void;
  view?: SchedulerView;
  defaultView?: SchedulerView;
  onViewChange?: (view: SchedulerView) => void;
  /** The views offered in the toolbar; an empty list hides the switcher. */
  views?: SchedulerView[];
  date?: Date;
  defaultDate?: Date;
  onDateChange?: (date: Date) => void;
  /** 0 for Sunday, 1 for Monday (default). */
  weekStartsOn?: 0 | 1;
  /** The hours the time grid covers, and the hour it scrolls to first. */
  startHour?: number;
  endHour?: number;
  scrollToHour?: number;
  hourHeight?: number;
  /** Minutes that drags snap to. */
  snap?: number;
  /** A fixed "now" for demos and tests; otherwise the clock, updated each minute. */
  now?: Date;
  locale?: string;
  /** Extra controls at the right of the toolbar, e.g. a New event button. */
  actions?: ReactNode;
  /** Controls at the left of the toolbar, e.g. a sidebar toggle. */
  leading?: ReactNode;
  /** Title for a new event made by clicking or dragging on the grid. */
  newEventTitle?: string;
  className?: string;
}

/**
 * A calendar for one day, a week, a work week, a month or an agenda. With onEventsChange, drag on the grid
 * to create, drag an event to move it (across days too), drag its bottom edge to resize, and click it to
 * edit. Alt + arrows move a focused event; Alt + Shift + arrows resize it.
 */
export function Scheduler({
  events,
  onEventsChange,
  view: viewProp,
  defaultView = "week",
  onViewChange,
  views = ["day", "week", "month", "agenda"],
  date: dateProp,
  defaultDate,
  onDateChange,
  weekStartsOn = 1,
  startHour = 0,
  endHour = 24,
  scrollToHour = 8,
  hourHeight = 48,
  snap = 15,
  now: nowProp,
  locale = "en-US",
  actions,
  leading,
  newEventTitle = "New event",
  className,
}: SchedulerProps) {
  const [view, setView] = useControlled(viewProp, defaultView, onViewChange);
  const [date, setDate] = useControlled(dateProp, defaultDate ?? startOfDay(new Date()), onDateChange);
  const [openId, setOpenId] = useState<string | null>(null);
  const [fresh, setFresh] = useState<string | null>(null);
  const uid = useId();
  const editable = !!onEventsChange;

  const step = (dir: number) => {
    if (view === "month") setDate(new Date(date.getFullYear(), date.getMonth() + dir, 1));
    else setDate(addDays(date, view === "day" ? dir : 7 * dir));
  };

  const title = useMemo(() => {
    if (view === "day") return date.toLocaleDateString(locale, { weekday: "long", month: "long", day: "numeric" });
    if (view === "month") return date.toLocaleDateString(locale, { month: "long", year: "numeric" });
    if (view === "agenda") return `From ${date.toLocaleDateString(locale, { month: "short", day: "numeric" })}`;
    const first = startOfWeek(date, view === "workweek" ? 1 : weekStartsOn);
    const last = addDays(first, view === "workweek" ? 4 : 6);
    const sameMonth = first.getMonth() === last.getMonth();
    return `${first.toLocaleDateString(locale, { month: "short", day: "numeric" })} – ${last.toLocaleDateString(locale, sameMonth ? { day: "numeric" } : { month: "short", day: "numeric" })}, ${last.getFullYear()}`;
  }, [view, date, locale, weekStartsOn]);

  const update = (next: SchedulerEvent) => onEventsChange?.(events.map((e) => (e.id === next.id ? next : e)));
  const remove = (id: string) => {
    onEventsChange?.(events.filter((e) => e.id !== id));
    setOpenId(null);
  };
  const create = (start: Date, end: Date, allDay = false) => {
    const id = `ev-${Date.now().toString(36)}`;
    onEventsChange?.([...events, { id, title: newEventTitle, start, end, allDay, color: "blue" }]);
    setFresh(id);
    setOpenId(id);
  };

  const details = (e: SchedulerEvent) => <EventDetails event={e} editable={editable} locale={locale} autoFocus={fresh === e.id} onChange={update} onDelete={() => remove(e.id)} />;
  const popover = { openId, setOpenId: (id: string | null) => (setOpenId(id), id === null && setFresh(null)), details };

  return (
    <div className={cn("flex h-full min-h-0 w-full flex-col overflow-hidden text-neutral-950 dark:text-white", className)}>
      <div className="flex shrink-0 flex-wrap items-center gap-2 px-3 py-2.5">
        {leading}
        <button
          type="button"
          onClick={() => setDate(startOfDay(new Date()))}
          className="h-8 rounded-[var(--ui-radius,9px)] px-3 text-[12.5px] font-medium text-neutral-800 ring-1 ring-black/[0.08] outline-none transition-colors hover:bg-neutral-950/[0.03] focus-visible:bg-neutral-950/[0.05] dark:text-neutral-200 dark:ring-white/[0.1] dark:hover:bg-white/[0.05]"
        >
          Today
        </button>
        <div className="flex">
          {[-1, 1].map((dir) => (
            <button
              key={dir}
              type="button"
              aria-label={dir < 0 ? "Previous" : "Next"}
              onClick={() => step(dir)}
              className="flex size-8 items-center justify-center rounded-[var(--ui-radius,9px)] text-neutral-500 outline-none transition-colors hover:bg-neutral-950/[0.05] hover:text-neutral-900 focus-visible:bg-neutral-950/[0.06] dark:hover:bg-white/[0.08] dark:hover:text-white"
            >
              {dir < 0 ? <ChevronLeft className="size-4" /> : <ChevronRight className="size-4" />}
            </button>
          ))}
        </div>
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.h2 key={title} initial={{ opacity: 0, y: 4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -4 }} transition={SPRING} className="text-[15px] font-semibold tracking-[-0.01em]">
            {title}
          </motion.h2>
        </AnimatePresence>
        <div className="ml-auto flex items-center gap-2">
          {actions}
          {views.length > 1 && (
            <div role="tablist" aria-label="View" className="flex rounded-[10px] bg-neutral-950/[0.05] p-0.5 dark:bg-white/[0.07]">
              {views.map((v) => (
                <button
                  key={v}
                  role="tab"
                  type="button"
                  aria-selected={view === v}
                  onClick={() => setView(v)}
                  className={cn("relative h-7 rounded-[8px] px-2.5 text-[12px] font-medium outline-none transition-colors", view === v ? "text-neutral-950 dark:text-white" : "text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200")}
                >
                  {view === v && <motion.span layoutId={`${uid}-view`} className="absolute inset-0 rounded-[8px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.1)] dark:bg-neutral-700" transition={SPRING} />}
                  <span className="relative">{VIEW_LABEL[v]}</span>
                </button>
              ))}
            </div>
          )}
        </div>
      </div>
      <div className="relative min-h-0 flex-1 border-t border-black/[0.06] dark:border-white/[0.07]">
        {view === "month" ? (
          <MonthGrid events={events} date={date} weekStartsOn={weekStartsOn} locale={locale} popover={popover} onPickDay={(d) => (setDate(d), views.includes("day") && setView("day"))} now={nowProp} />
        ) : view === "agenda" ? (
          <Agenda events={events} date={date} locale={locale} popover={popover} />
        ) : (
          <TimeGrid
            days={view === "day" ? [startOfDay(date)] : Array.from({ length: view === "workweek" ? 5 : 7 }, (_, i) => addDays(startOfWeek(date, view === "workweek" ? 1 : weekStartsOn), i))}
            events={events}
            editable={editable}
            onCommit={update}
            onCreate={create}
            startHour={startHour}
            endHour={endHour}
            scrollToHour={scrollToHour}
            hourHeight={hourHeight}
            snap={snap}
            now={nowProp}
            locale={locale}
            popover={popover}
            onPickDay={views.includes("day") && view !== "day" ? (d) => (setDate(d), setView("day")) : undefined}
          />
        )}
      </div>
    </div>
  );
}

type PopoverCtl = { openId: string | null; setOpenId: (id: string | null) => void; details: (e: SchedulerEvent) => ReactNode };

type Drag = { kind: "create" | "move" | "resize"; id: string; x: number; y: number; day: number; minute: number; base?: SchedulerEvent; moved: boolean };

interface TimeGridProps {
  days: Date[];
  events: SchedulerEvent[];
  editable: boolean;
  onCommit: (e: SchedulerEvent) => void;
  onCreate: (start: Date, end: Date, allDay?: boolean) => void;
  startHour: number;
  endHour: number;
  scrollToHour: number;
  hourHeight: number;
  snap: number;
  now?: Date;
  locale: string;
  popover: PopoverCtl;
  onPickDay?: (d: Date) => void;
}

function TimeGrid({ days, events, editable, onCommit, onCreate, startHour, endHour, scrollToHour, hourHeight, snap, now: nowProp, locale, popover, onPickDay }: TimeGridProps) {
  const scroller = useRef<HTMLDivElement>(null);
  const columns = useRef<HTMLDivElement>(null);
  const drag = useRef<Drag | null>(null);
  const [ghost, setGhostState] = useState<SchedulerEvent | null>(null);
  const ghostRef = useRef<SchedulerEvent | null>(null);
  const setGhost = (g: SchedulerEvent | null) => {
    ghostRef.current = g;
    setGhostState(g);
  };
  const now = useNow(nowProp);
  const f = formatters(locale);
  const hours = Array.from({ length: endHour - startHour }, (_, i) => startHour + i);
  const height = hours.length * hourHeight;

  useEffect(() => {
    if (scroller.current) scroller.current.scrollTop = Math.max(0, (scrollToHour - startHour) * hourHeight - 8);
  }, [scrollToHour, startHour, hourHeight]);

  const shown = useMemo(() => {
    if (!ghost) return events;
    return events.some((e) => e.id === ghost.id) ? events.map((e) => (e.id === ghost.id ? ghost : e)) : [...events, ghost];
  }, [events, ghost]);

  const allDay = useMemo(() => {
    const first = days[0];
    const after = addDays(days[days.length - 1], 1);
    const spans = shown
      .filter((e) => (e.allDay || !sameDay(e.start, addMinutes(e.end, -1))) && e.start < after && e.end > first)
      .map((e) => ({ e, s: clamp(Math.floor(minutesFrom(first, e.start) / 1440), 0, days.length - 1), f: clamp(Math.ceil(minutesFrom(first, e.end) / 1440), 1, days.length) }));
    return lanes(spans);
  }, [shown, days]);
  const allDayRows = allDay.reduce((n, a) => Math.max(n, a.lane + 1), 0);

  const at = (clientX: number, clientY: number) => {
    const rect = columns.current!.getBoundingClientRect();
    const day = clamp(Math.floor(((clientX - rect.left) / rect.width) * days.length), 0, days.length - 1);
    const minute = clamp(startHour * 60 + ((clientY - rect.top) / hourHeight) * 60, startHour * 60, endHour * 60);
    return { day, minute };
  };
  const snapped = (m: number) => Math.round(m / snap) * snap;

  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
    if (e.button !== 0) return;
    const target = e.target as HTMLElement;
    const el = target.closest<HTMLElement>("[data-event-id]");
    if (popover.openId && !el) {
      popover.setOpenId(null);
      return;
    }
    const { day, minute } = at(e.clientX, e.clientY);
    if (el) {
      const base = events.find((ev) => ev.id === el.dataset.eventId);
      if (!base) return;
      drag.current = { kind: editable && target.closest("[data-resize]") ? "resize" : "move", id: base.id, x: e.clientX, y: e.clientY, day, minute, base, moved: false };
    } else if (editable) {
      drag.current = { kind: "create", id: "__new", x: e.clientX, y: e.clientY, day, minute: Math.floor(minute / snap) * snap, moved: false };
    } else return;
    e.currentTarget.setPointerCapture(e.pointerId);
  };

  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
    const d = drag.current;
    if (!d) return;
    if (!d.moved && Math.hypot(e.clientX - d.x, e.clientY - d.y) < 4) return;
    if (!d.moved && d.kind !== "create" && !editable) return;
    d.moved = true;
    const { day, minute } = at(e.clientX, e.clientY);
    if (d.kind === "create") {
      const a = d.minute;
      const b = Math.max(snapped(minute), 0);
      const from = Math.min(a, b);
      const to = Math.max(a + snap, b);
      const base = days[d.day];
      setGhost({ id: "__new", title: "", start: addMinutes(base, from), end: addMinutes(base, to), color: "blue" });
    } else if (d.kind === "move" && d.base) {
      const delta = snapped(minute - d.minute);
      const dd = day - d.day;
      setGhost({ ...d.base, start: addMinutes(addDays(d.base.start, dd), delta), end: addMinutes(addDays(d.base.end, dd), delta) });
    } else if (d.kind === "resize" && d.base) {
      const end = addMinutes(d.base.end, snapped(minute - d.minute));
      setGhost({ ...d.base, end: end.getTime() - d.base.start.getTime() < snap * 60000 ? addMinutes(d.base.start, snap) : end });
    }
  };

  const onPointerUp = () => {
    const d = drag.current;
    drag.current = null;
    if (!d) return;
    if (!d.moved) {
      if (d.kind === "create") {
        const base = days[d.day];
        onCreate(addMinutes(base, d.minute), addMinutes(base, d.minute + 60));
      } else popover.setOpenId(d.id);
      setGhost(null);
      return;
    }
    const g = ghostRef.current;
    if (g) {
      if (d.kind === "create") onCreate(g.start, g.end);
      else onCommit(g);
    }
    setGhost(null);
  };

  const onKeyDown = (e: ReactKeyboardEvent, ev: SchedulerEvent) => {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      popover.setOpenId(ev.id);
      return;
    }
    if (!editable || !e.altKey) return;
    const moves: Record<string, [number, number]> = { ArrowUp: [0, -snap], ArrowDown: [0, snap], ArrowLeft: [-1, 0], ArrowRight: [1, 0] };
    const m = moves[e.key];
    if (!m) return;
    e.preventDefault();
    if (e.shiftKey && m[0] === 0) {
      const end = addMinutes(ev.end, m[1]);
      if (end > ev.start) onCommit({ ...ev, end });
    } else onCommit({ ...ev, start: addMinutes(addDays(ev.start, m[0]), m[1]), end: addMinutes(addDays(ev.end, m[0]), m[1]) });
  };

  const todayIndex = now ? days.findIndex((d) => sameDay(d, now)) : -1;
  const nowTop = now ? ((now.getHours() * 60 + now.getMinutes() - startHour * 60) / 60) * hourHeight : -1;
  const cols = `56px repeat(${days.length}, minmax(0, 1fr))`;

  return (
    <div ref={scroller} className="absolute inset-0 overflow-y-auto overflow-x-hidden [scrollbar-width:thin]">
      <div className="sticky top-0 z-20 bg-[var(--ui-surface-raised,#fff)] dark:bg-[var(--ui-surface-raised,#171717)]">
        <div className="grid border-b border-black/[0.06] dark:border-white/[0.07]" style={{ gridTemplateColumns: cols }}>
          <span />
          {days.map((d) => {
            const today = now && sameDay(d, now);
            const Tag = onPickDay ? "button" : "div";
            return (
              <Tag
                key={d.toISOString()}
                {...(onPickDay ? { type: "button" as const, onClick: () => onPickDay(d) } : {})}
                className="flex h-12 min-w-0 flex-col items-center justify-center gap-0.5 outline-none"
              >
                <span className={cn("text-[11px] font-medium uppercase tracking-[0.04em]", today ? "text-[var(--ui-accent,#0a0a0a)] dark:text-[var(--ui-accent,#fff)]" : "text-neutral-400")}>
                  {d.toLocaleDateString(locale, { weekday: "short" })}
                </span>
                <span
                  className={cn(
                    "flex size-6 items-center justify-center rounded-full text-[13px] font-semibold tabular-nums",
                    today ? "bg-[var(--ui-accent,#0a0a0a)] text-[var(--ui-accent-fg,#fff)] dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]" : "text-neutral-800 dark:text-neutral-200",
                  )}
                >
                  {d.getDate()}
                </span>
              </Tag>
            );
          })}
        </div>
        {allDayRows > 0 && (
          <div className="grid border-b border-black/[0.06] py-1 dark:border-white/[0.07]" style={{ gridTemplateColumns: cols }}>
            <span className="self-center pr-2 text-right text-[10.5px] text-neutral-400" style={{ gridRow: `1 / span ${allDayRows}` }}>
              All day
            </span>
            {allDay.map(({ e, s, f: fin, lane }) => (
              <EventPopover key={e.id} open={popover.openId === e.id} onOpenChange={(o) => popover.setOpenId(o ? e.id : null)} content={popover.details(e)} side="bottom">
                <button
                  type="button"
                  onClick={() => popover.setOpenId(e.id)}
                  className={cn("mx-0.5 mb-0.5 h-5 truncate rounded-[6px] px-1.5 text-left text-[11.5px] font-medium outline-none", COLORS[e.color ?? "blue"].chip)}
                  style={{ gridColumn: `${s + 2} / ${fin + 2}`, gridRow: lane + 1 }}
                >
                  {e.title}
                </button>
              </EventPopover>
            ))}
          </div>
        )}
      </div>
      <div className="grid" style={{ gridTemplateColumns: cols }}>
        <div className="relative" style={{ height }}>
          {hours.slice(1).map((h, i) => (
            <span key={h} className="absolute right-2 -translate-y-1/2 text-[10.5px] tabular-nums text-neutral-400" style={{ top: (i + 1) * hourHeight }}>
              {f.hour(h)}
            </span>
          ))}
          {todayIndex >= 0 && nowTop >= 0 && nowTop <= height && (
            <span className="absolute right-1.5 -translate-y-1/2 rounded-[4px] bg-rose-500 px-1 text-[10px] font-medium tabular-nums text-white" style={{ top: nowTop }}>
              {f.time(now!)}
            </span>
          )}
        </div>
        <div
          ref={columns}
          onPointerDown={onPointerDown}
          onPointerMove={onPointerMove}
          onPointerUp={onPointerUp}
          onPointerCancel={() => ((drag.current = null), setGhost(null))}
          className={cn("relative grid touch-none select-none", editable && "cursor-crosshair")}
          style={{
            gridColumn: `2 / span ${days.length}`,
            gridTemplateColumns: `repeat(${days.length}, minmax(0, 1fr))`,
            height,
            backgroundImage: `repeating-linear-gradient(to bottom, transparent 0, transparent ${hourHeight - 1}px, var(--grid-line) ${hourHeight - 1}px, var(--grid-line) ${hourHeight}px)`,
          }}
        >
          {days.map((d, i) => (
            <div key={d.toISOString()} className={cn("relative border-l border-black/[0.06] [--grid-line:rgb(0_0_0/0.06)] dark:border-white/[0.07] dark:[--grid-line:rgb(255_255_255/0.07)]", d.getDay() % 6 === 0 && "bg-neutral-950/[0.015] dark:bg-white/[0.015]")}>
              {layoutDay(shown, d).map(({ e, s, f: fin, col, cols: n }) => {
                const top = ((s - startHour * 60) / 60) * hourHeight;
                const h = Math.max(((fin - s) / 60) * hourHeight - 2, 18);
                const dragging = ghost?.id === e.id;
                const short = h < 40;
                return (
                  <EventPopover key={e.id} open={popover.openId === e.id && !dragging} onOpenChange={(o) => popover.setOpenId(o ? e.id : null)} content={popover.details(e)}>
                    <motion.div
                      layout={!dragging}
                      transition={SPRING}
                      data-event-id={e.id === "__new" ? undefined : e.id}
                      role="button"
                      tabIndex={e.id === "__new" ? -1 : 0}
                      aria-label={`${e.title || "New event"}, ${f.range(e.start, e.end)}`}
                      onKeyDown={(k) => onKeyDown(k, e)}
                      className={cn(
                        "group absolute overflow-hidden rounded-[8px] pl-2.5 pr-1.5 text-left outline-none ring-1 ring-white transition-shadow focus-visible:ring-2 focus-visible:ring-neutral-950/40 dark:ring-neutral-900 dark:focus-visible:ring-white/50",
                        COLORS[e.color ?? "blue"].block,
                        dragging ? "z-10 cursor-grabbing shadow-[0_12px_28px_-8px_rgb(0_0_0/0.3)]" : editable ? "cursor-grab" : "cursor-pointer",
                        short ? "flex items-center gap-1.5 py-0" : "py-1",
                      )}
                      style={{ top, height: h, left: `calc(${(col / n) * 100}% + 2px)`, width: `calc(${100 / n}% - 4px)` }}
                    >
                      <span className={cn("absolute inset-y-1 left-1 w-[3px] rounded-full", COLORS[e.color ?? "blue"].bar)} />
                      <p className="truncate text-[12px] font-semibold leading-tight">{e.title || "New event"}</p>
                      <p className={cn("truncate text-[11px] leading-tight opacity-70 tabular-nums", !short && "mt-0.5")}>{f.range(e.start, e.end)}</p>
                      {!short && e.location && <p className="mt-0.5 truncate text-[11px] leading-tight opacity-60">{e.location}</p>}
                      {editable && e.id !== "__new" && <span data-resize="" className="absolute inset-x-0 bottom-0 h-1.5 cursor-ns-resize" />}
                    </motion.div>
                  </EventPopover>
                );
              })}
              {i === todayIndex && nowTop >= 0 && nowTop <= height && (
                <div className="pointer-events-none absolute inset-x-0 z-[5] flex items-center" style={{ top: nowTop - 4 }}>
                  <span className="-ml-1 size-2 rounded-full bg-rose-500" />
                  <span className="h-[2px] flex-1 bg-rose-500" />
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function MonthGrid({ events, date, weekStartsOn, locale, popover, onPickDay, now: nowProp }: { events: SchedulerEvent[]; date: Date; weekStartsOn: number; locale: string; popover: PopoverCtl; onPickDay: (d: Date) => void; now?: Date }) {
  const now = useNow(nowProp);
  const f = formatters(locale);
  const first = new Date(date.getFullYear(), date.getMonth(), 1);
  const start = startOfWeek(first, weekStartsOn);
  const cells = Array.from({ length: 42 }, (_, i) => addDays(start, i));
  const [more, setMore] = useState<string | null>(null);
  return (
    <div className="absolute inset-0 flex flex-col">
      <div className="grid shrink-0 grid-cols-7 border-b border-black/[0.06] dark:border-white/[0.07]">
        {cells.slice(0, 7).map((d) => (
          <span key={d.toISOString()} className="py-2 text-center text-[11px] font-medium uppercase tracking-[0.04em] text-neutral-400">
            {d.toLocaleDateString(locale, { weekday: "short" })}
          </span>
        ))}
      </div>
      <div className="grid min-h-0 flex-1 grid-cols-7 grid-rows-6">
        {cells.map((d) => {
          const list = events
            .filter((e) => e.start < addDays(d, 1) && e.end > d)
            .sort((a, b) => Number(!!b.allDay) - Number(!!a.allDay) || a.start.getTime() - b.start.getTime());
          const inMonth = d.getMonth() === date.getMonth();
          const today = now && sameDay(d, now);
          const key = d.toISOString();
          const visible = list.slice(0, list.length > 3 ? 2 : 3);
          return (
            <div key={key} className={cn("flex min-h-0 flex-col gap-0.5 overflow-hidden border-b border-l border-black/[0.06] p-1 dark:border-white/[0.07]", !inMonth && "bg-neutral-950/[0.02] dark:bg-white/[0.02]")}>
              <button
                type="button"
                onClick={() => onPickDay(d)}
                className={cn(
                  "flex size-6 shrink-0 items-center justify-center self-start rounded-full text-[12px] font-medium tabular-nums outline-none transition-colors",
                  today ? "bg-[var(--ui-accent,#0a0a0a)] text-[var(--ui-accent-fg,#fff)] dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]" : inMonth ? "text-neutral-800 hover:bg-neutral-950/[0.05] dark:text-neutral-200 dark:hover:bg-white/[0.08]" : "text-neutral-400",
                )}
              >
                {d.getDate()}
              </button>
              {visible.map((e) => (
                <EventPopover key={e.id} open={popover.openId === `${key}:${e.id}`} onOpenChange={(o) => popover.setOpenId(o ? `${key}:${e.id}` : null)} content={popover.details(e)}>
                  <button
                    type="button"
                    onClick={() => popover.setOpenId(`${key}:${e.id}`)}
                    className={cn(
                      "flex h-5 min-w-0 shrink-0 items-center gap-1 rounded-[5px] px-1 text-left text-[11px] outline-none",
                      e.allDay ? cn("font-medium", COLORS[e.color ?? "blue"].chip) : "text-neutral-700 hover:bg-neutral-950/[0.04] dark:text-neutral-300 dark:hover:bg-white/[0.06]",
                    )}
                  >
                    {!e.allDay && <span className={cn("size-1.5 shrink-0 rounded-full", COLORS[e.color ?? "blue"].bar)} />}
                    {!e.allDay && <span className="shrink-0 tabular-nums text-neutral-400">{f.time(e.start)}</span>}
                    <span className="truncate">{e.title}</span>
                  </button>
                </EventPopover>
              ))}
              {list.length > visible.length && (
                <PopoverPrimitive.Root open={more === key} onOpenChange={(o) => setMore(o ? key : null)}>
                  <PopoverPrimitive.Trigger className="h-5 shrink-0 rounded-[5px] px-1 text-left text-[11px] font-medium text-neutral-500 outline-none hover:bg-neutral-950/[0.04] hover:text-neutral-900 dark:hover:bg-white/[0.06] dark:hover:text-white">
                    +{list.length - visible.length} more
                  </PopoverPrimitive.Trigger>
                  <PopoverPrimitive.Portal>
                    <PopoverPrimitive.Content side="bottom" align="start" sideOffset={4} collisionPadding={12} className="z-50 w-[220px] rounded-[14px] bg-white p-1.5 shadow-[0_16px_40px_-12px_rgb(0_0_0/0.25)] ring-1 ring-black/[0.06] outline-none dark:bg-neutral-900 dark:ring-white/[0.1]">
                      <p className="px-1.5 pb-1 pt-0.5 text-[12px] font-semibold text-neutral-950 dark:text-white">{d.toLocaleDateString(locale, { weekday: "long", month: "short", day: "numeric" })}</p>
                      {list.map((e) => (
                        <div key={e.id} className="flex h-7 items-center gap-2 rounded-[8px] px-1.5 text-[12px] text-neutral-700 dark:text-neutral-300">
                          <span className={cn("size-2 shrink-0 rounded-full", COLORS[e.color ?? "blue"].bar)} />
                          <span className="flex-1 truncate">{e.title}</span>
                          <span className="shrink-0 tabular-nums text-neutral-400">{e.allDay ? "All day" : f.time(e.start)}</span>
                        </div>
                      ))}
                    </PopoverPrimitive.Content>
                  </PopoverPrimitive.Portal>
                </PopoverPrimitive.Root>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function Agenda({ events, date, locale, popover }: { events: SchedulerEvent[]; date: Date; locale: string; popover: PopoverCtl }) {
  const now = useNow();
  const f = formatters(locale);
  const from = startOfDay(date);
  const days = Array.from({ length: 21 }, (_, i) => addDays(from, i))
    .map((d) => ({ d, list: events.filter((e) => e.start < addDays(d, 1) && e.end > d).sort((a, b) => Number(!!b.allDay) - Number(!!a.allDay) || a.start.getTime() - b.start.getTime()) }))
    .filter((x) => x.list.length);
  return (
    <div className="absolute inset-0 overflow-y-auto px-3 pb-4">
      {days.length === 0 && <p className="py-16 text-center text-[13px] text-neutral-500">Nothing in the next three weeks.</p>}
      {days.map(({ d, list }) => {
        const today = now && sameDay(d, now);
        return (
          <section key={d.toISOString()} className="grid grid-cols-[88px_1fr] gap-3 border-b border-black/[0.05] py-3 last:border-0 dark:border-white/[0.06]">
            <div className="pt-1">
              <p className={cn("text-[22px] font-semibold leading-none tabular-nums tracking-[-0.02em]", today && "text-[var(--ui-accent,#0a0a0a)] dark:text-[var(--ui-accent,#fff)]")}>{d.getDate()}</p>
              <p className="mt-1 text-[11.5px] text-neutral-500">
                {today ? "Today" : d.toLocaleDateString(locale, { weekday: "short" })} · {d.toLocaleDateString(locale, { month: "short" })}
              </p>
            </div>
            <ul className="flex flex-col gap-1">
              {list.map((e) => {
                const id = `agenda:${d.toISOString()}:${e.id}`;
                return (
                  <li key={e.id}>
                    <EventPopover open={popover.openId === id} onOpenChange={(o) => popover.setOpenId(o ? id : null)} content={popover.details(e)} side="bottom">
                      <button type="button" onClick={() => popover.setOpenId(id)} className="flex w-full items-center gap-3 rounded-[10px] px-2.5 py-2 text-left outline-none transition-colors hover:bg-neutral-950/[0.03] focus-visible:bg-neutral-950/[0.05] dark:hover:bg-white/[0.04]">
                        <span className={cn("h-8 w-[3px] shrink-0 rounded-full", COLORS[e.color ?? "blue"].bar)} />
                        <span className="w-[112px] shrink-0 text-[12px] tabular-nums text-neutral-500">{e.allDay ? "All day" : f.range(e.start, e.end)}</span>
                        <span className="min-w-0 flex-1">
                          <span className="block truncate text-[13px] font-medium">{e.title}</span>
                          {e.location && <span className="block truncate text-[12px] text-neutral-500">{e.location}</span>}
                        </span>
                      </button>
                    </EventPopover>
                  </li>
                );
              })}
            </ul>
          </section>
        );
      })}
    </div>
  );
}

type RDrag = { kind: "create" | "move" | "resize"; id: string; x: number; y: number; row: number; minute: number; base?: ResourceEvent; moved: boolean };

export interface ResourceTimelineProps {
  resources: Resource[];
  events: ResourceEvent[];
  onEventsChange?: (events: ResourceEvent[]) => void;
  /** The day shown. */
  date: Date;
  startHour?: number;
  endHour?: number;
  hourWidth?: number;
  rowHeight?: number;
  snap?: number;
  now?: Date;
  locale?: string;
  /** Heading over the resource column, e.g. Team or Rooms. */
  label?: ReactNode;
  newEventTitle?: string;
  className?: string;
}

/** One row per person or room with the hours running across: drag on a row to book, drag a booking to move it in time or to another row, and drag its right edge to resize. */
export function ResourceTimeline({
  resources,
  events,
  onEventsChange,
  date,
  startHour = 8,
  endHour = 20,
  hourWidth = 88,
  rowHeight = 56,
  snap = 15,
  now: nowProp,
  locale = "en-US",
  label = "Team",
  newEventTitle = "New booking",
  className,
}: ResourceTimelineProps) {
  const tracks = useRef<HTMLDivElement>(null);
  const drag = useRef<RDrag | null>(null);
  const [ghost, setGhostState] = useState<ResourceEvent | null>(null);
  const ghostRef = useRef<ResourceEvent | null>(null);
  const setGhost = (g: ResourceEvent | null) => {
    ghostRef.current = g;
    setGhostState(g);
  };
  const [openId, setOpenId] = useState<string | null>(null);
  const [fresh, setFresh] = useState<string | null>(null);
  const now = useNow(nowProp);
  const f = formatters(locale);
  const day = startOfDay(date);
  const editable = !!onEventsChange;
  const hours = Array.from({ length: endHour - startHour }, (_, i) => startHour + i);
  const width = hours.length * hourWidth;
  const shown = ghost ? (events.some((e) => e.id === ghost.id) ? events.map((e) => (e.id === ghost.id ? ghost : e)) : [...events, ghost]) : events;

  const at = (clientX: number, clientY: number) => {
    const rect = tracks.current!.getBoundingClientRect();
    return {
      row: clamp(Math.floor((clientY - rect.top) / rowHeight), 0, resources.length - 1),
      minute: clamp(startHour * 60 + ((clientX - rect.left) / hourWidth) * 60, startHour * 60, endHour * 60),
    };
  };
  const snapped = (m: number) => Math.round(m / snap) * snap;
  const update = (next: ResourceEvent) => onEventsChange?.(events.map((e) => (e.id === next.id ? next : e)));
  const create = (resourceId: string, start: Date, end: Date) => {
    const id = `bk-${Date.now().toString(36)}`;
    onEventsChange?.([...events, { id, resourceId, title: newEventTitle, start, end, color: "blue" }]);
    setFresh(id);
    setOpenId(id);
  };

  const onPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
    if (e.button !== 0) return;
    const target = e.target as HTMLElement;
    const el = target.closest<HTMLElement>("[data-event-id]");
    if (openId && !el) {
      setOpenId(null);
      setFresh(null);
      return;
    }
    const { row, minute } = at(e.clientX, e.clientY);
    if (el) {
      const base = events.find((ev) => ev.id === el.dataset.eventId);
      if (!base) return;
      drag.current = { kind: editable && target.closest("[data-resize]") ? "resize" : "move", id: base.id, x: e.clientX, y: e.clientY, row, minute, base, moved: false };
    } else if (editable) drag.current = { kind: "create", id: "__new", x: e.clientX, y: e.clientY, row, minute: Math.floor(minute / snap) * snap, moved: false };
    else return;
    e.currentTarget.setPointerCapture(e.pointerId);
  };

  const onPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
    const d = drag.current;
    if (!d || !editable) return;
    if (!d.moved && Math.hypot(e.clientX - d.x, e.clientY - d.y) < 4) return;
    d.moved = true;
    const { row, minute } = at(e.clientX, e.clientY);
    if (d.kind === "create") {
      const b = snapped(minute);
      setGhost({ id: "__new", resourceId: resources[d.row].id, title: "", start: addMinutes(day, Math.min(d.minute, b)), end: addMinutes(day, Math.max(d.minute + snap, b)), color: "blue" });
    } else if (d.kind === "move" && d.base) {
      const delta = snapped(minute - d.minute);
      setGhost({ ...d.base, resourceId: resources[row].id, start: addMinutes(d.base.start, delta), end: addMinutes(d.base.end, delta) });
    } else if (d.kind === "resize" && d.base) {
      const end = addMinutes(d.base.end, snapped(minute - d.minute));
      setGhost({ ...d.base, end: end.getTime() - d.base.start.getTime() < snap * 60000 ? addMinutes(d.base.start, snap) : end });
    }
  };

  const onPointerUp = () => {
    const d = drag.current;
    drag.current = null;
    if (!d) return;
    if (!d.moved) {
      if (d.kind === "create") create(resources[d.row].id, addMinutes(day, d.minute), addMinutes(day, d.minute + 60));
      else setOpenId(d.id);
    } else if (ghostRef.current) {
      const g = ghostRef.current;
      if (d.kind === "create") create(g.resourceId, g.start, g.end);
      else update(g);
    }
    setGhost(null);
  };

  const nowLeft = now && sameDay(now, day) ? ((now.getHours() * 60 + now.getMinutes() - startHour * 60) / 60) * hourWidth : -1;

  return (
    <div className={cn("relative h-full min-h-0 w-full overflow-auto text-neutral-950 [scrollbar-width:thin] dark:text-white", className)}>
      <div className="relative" style={{ width: 200 + width }}>
        <div className="sticky top-0 z-20 flex border-b border-black/[0.06] bg-[var(--ui-surface-raised,#fff)] dark:border-white/[0.07] dark:bg-[var(--ui-surface-raised,#171717)]">
          <div className="sticky left-0 z-10 flex h-10 w-[200px] shrink-0 items-center bg-inherit px-3 text-[12px] font-medium text-neutral-500">{label}</div>
          {hours.map((h) => (
            <span key={h} className="flex h-10 shrink-0 items-center border-l border-black/[0.06] px-2 text-[11px] tabular-nums text-neutral-400 dark:border-white/[0.07]" style={{ width: hourWidth }}>
              {f.hour(h)}
            </span>
          ))}
        </div>
        <div className="flex">
          <div className="sticky left-0 z-10 w-[200px] shrink-0 bg-[var(--ui-surface-raised,#fff)] dark:bg-[var(--ui-surface-raised,#171717)]">
            {resources.map((r) => (
              <div key={r.id} className="flex items-center gap-2.5 border-b border-black/[0.05] px-3 dark:border-white/[0.06]" style={{ height: rowHeight }}>
                {r.avatar}
                <span className="min-w-0">
                  <span className="block truncate text-[13px] font-medium">{r.name}</span>
                  {r.subtitle && <span className="block truncate text-[11.5px] text-neutral-500">{r.subtitle}</span>}
                </span>
              </div>
            ))}
          </div>
          <div
            ref={tracks}
            onPointerDown={onPointerDown}
            onPointerMove={onPointerMove}
            onPointerUp={onPointerUp}
            onPointerCancel={() => ((drag.current = null), setGhost(null))}
            className={cn("relative touch-none select-none [--grid-line:rgb(0_0_0/0.06)] dark:[--grid-line:rgb(255_255_255/0.07)]", editable && "cursor-crosshair")}
            style={{ width, backgroundImage: `repeating-linear-gradient(to right, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent ${hourWidth}px)` }}
          >
            {resources.map((r) => {
              const placed = lanes(
                shown
                  .filter((e) => e.resourceId === r.id && sameDay(e.start, day))
                  .map((e) => ({ e, s: minutesFrom(day, e.start), f: minutesFrom(day, e.end) })),
              );
              const count = placed.reduce((n, p) => Math.max(n, p.lane + 1), 1);
              const laneH = (rowHeight - 10) / count;
              return (
                <div key={r.id} className="relative border-b border-black/[0.05] dark:border-white/[0.06]" style={{ height: rowHeight }}>
                  {placed.map(({ e, s, f: fin, lane }) => {
                    const dragging = ghost?.id === e.id;
                    const color = e.color ?? "blue";
                    return (
                      <EventPopover
                        key={e.id}
                        open={openId === e.id && !dragging}
                        onOpenChange={(o) => (setOpenId(o ? e.id : null), !o && setFresh(null))}
                        side="bottom"
                        content={
                          <EventDetails
                            event={e}
                            editable={editable}
                            locale={locale}
                            autoFocus={fresh === e.id}
                            onChange={(n) => update(n as ResourceEvent)}
                            onDelete={() => (onEventsChange?.(events.filter((x) => x.id !== e.id)), setOpenId(null))}
                          />
                        }
                      >
                        <motion.div
                          layout={!dragging}
                          transition={SPRING}
                          data-event-id={e.id === "__new" ? undefined : e.id}
                          role="button"
                          tabIndex={e.id === "__new" ? -1 : 0}
                          aria-label={`${e.title || newEventTitle}, ${r.name}, ${f.range(e.start, e.end)}`}
                          onKeyDown={(k) => (k.key === "Enter" || k.key === " ") && (k.preventDefault(), setOpenId(e.id))}
                          className={cn(
                            "absolute flex min-w-0 flex-col justify-center overflow-hidden rounded-[8px] pl-2.5 pr-2 outline-none focus-visible:ring-2 focus-visible:ring-neutral-950/40 dark:focus-visible:ring-white/50",
                            COLORS[color].block,
                            dragging ? "z-10 cursor-grabbing shadow-[0_12px_28px_-8px_rgb(0_0_0/0.3)]" : editable ? "cursor-grab" : "cursor-pointer",
                          )}
                          style={{ left: ((s - startHour * 60) / 60) * hourWidth + 2, width: Math.max(((fin - s) / 60) * hourWidth - 4, 20), top: 5 + lane * laneH, height: laneH - 2 }}
                        >
                          <span className={cn("absolute inset-y-1 left-1 w-[3px] rounded-full", COLORS[color].bar)} />
                          <span className="truncate text-[12px] font-semibold leading-tight">{e.title || newEventTitle}</span>
                          {laneH > 34 && <span className="truncate text-[11px] leading-tight tabular-nums opacity-70">{f.range(e.start, e.end)}</span>}
                          {editable && e.id !== "__new" && <span data-resize="" className="absolute inset-y-0 right-0 w-1.5 cursor-ew-resize" />}
                        </motion.div>
                      </EventPopover>
                    );
                  })}
                </div>
              );
            })}
            {nowLeft >= 0 && nowLeft <= width && (
              <div className="pointer-events-none absolute inset-y-0 z-[5] flex flex-col items-center" style={{ left: nowLeft - 4 }}>
                <span className="size-2 rounded-full bg-rose-500" />
                <span className="w-[2px] flex-1 bg-rose-500" />
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Scheduler;

2f:T141e,"use client"; import { Check, Plus } from "lucide-react"; import { useMemo, useState } from "react"; import { Calendar } from "@/components/scalar-ui/calendar"; import { Scheduler, type EventColor, type SchedulerEvent } from "@/components/scalar-ui/scheduler"; import { cn } from "@/lib/utils"; const monday = (() => { const d = new Date(); const m = new Date(d.getFullYear(), d.getMonth(), d.getDate()); m.setDate(m.getDate() - ((m.getDay() + 6) % 7)); return m; })(); const at = (day: number, h: number, m = 0) => new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + day, h, m); const ev = (id: string, title: string, day: number, h: number, m: number, mins: number, color: EventColor, location?: string): SchedulerEvent => ({ id, title, start: at(day, h, m), end: new Date(at(day, h, m).getTime() + mins * 60000), color, location, }); const calendars: { id: EventColor; name: string }[] = [ { id: "blue", name: "Work" }, { id: "violet", name: "Team rituals" }, { id: "green", name: "Personal" }, { id: "amber", name: "Travel" }, ]; const SWATCH: Record = { blue: "bg-sky-500", violet: "bg-violet-500", green: "bg-emerald-500", amber: "bg-amber-500" }; const start: SchedulerEvent[] = [ ev("1", "Weekly planning", 0, 9, 30, 60, "violet", "Atlas room"), ev("2", "Design review", 0, 11, 0, 90, "blue", "Zoom"), ev("3", "Lunch with Amara", 0, 12, 30, 60, "green", "Café Lumen"), ev("4", "Hiring sync", 1, 10, 0, 45, "blue"), ev("5", "Pricing workshop", 1, 10, 30, 120, "blue", "Atlas room"), ev("6", "1:1 Diego", 1, 15, 0, 30, "violet"), ev("7", "Customer call · Kumo", 2, 9, 0, 45, "blue", "Meet"), ev("8", "Focus time", 2, 13, 0, 180, "gray"), ev("9", "Gym", 2, 18, 0, 60, "green"), ev("10", "Standup", 3, 9, 15, 15, "violet"), ev("11", "Roadmap review", 3, 14, 0, 60, "blue", "Atlas room"), ev("12", "Flight to Lisbon", 4, 16, 30, 165, "amber", "LHR T5"), ev("13", "Demo day", 4, 10, 0, 90, "violet"), ev("14", "Brunch", 5, 11, 0, 90, "green"), { id: "15", title: "Offsite · Lisbon", start: at(4, 0), end: at(7, 0), allDay: true, color: "amber" }, ]; export default function Demo() { const [events, setEvents] = useState(start); const [date, setDate] = useState(new Date()); const [hidden, setHidden] = useState([]); const visible = useMemo(() => events.filter((e) => !hidden.includes(e.color ?? "blue")), [events, hidden]); const addEvent = () => { const s = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 16, 0); setEvents([...events, { id: String(Date.now()), title: "New event", start: s, end: new Date(s.getTime() + 3600000), color: "blue" }]); }; return (

d && setDate(d)} month={date} onMonthChange={setDate} markers={events.map((e) => e.start)} className="-mx-1.5" />

My calendars

{calendars.map((c) => { const on = !hidden.includes(c.id); return ( ); })}

setEvents([...next, ...events.filter((e) => hidden.includes(e.color ?? "blue"))])} date={date} onDateChange={setDate} startHour={6} endHour={22} />

); } 30:Tf4e4,

"use client";

import { Check, Plus } from "lucide-react";
import { useMemo, useState } from "react";
import { Calendar } from "@/components/scalar-ui/calendar";
import { Scheduler, type EventColor, type SchedulerEvent } from "@/components/scalar-ui/scheduler";
import { cn } from "@/lib/utils";

const monday = (() => {
  const d = new Date();
  const m = new Date(d.getFullYear(), d.getMonth(), d.getDate());
  m.setDate(m.getDate() - ((m.getDay() + 6) % 7));
  return m;
})();

const at = (day: number, h: number, m = 0) => new Date(monday.getFullYear(), monday.getMonth(), monday.getDate() + day, h, m);
const ev = (id: string, title: string, day: number, h: number, m: number, mins: number, color: EventColor, location?: string): SchedulerEvent => ({
  id,
  title,
  start: at(day, h, m),
  end: new Date(at(day, h, m).getTime() + mins * 60000),
  color,
  location,
});

const calendars: { id: EventColor; name: string }[] = [
  { id: "blue", name: "Work" },
  { id: "violet", name: "Team rituals" },
  { id: "green", name: "Personal" },
  { id: "amber", name: "Travel" },
];

const SWATCH: Record<string, string> = { blue: "bg-sky-500", violet: "bg-violet-500", green: "bg-emerald-500", amber: "bg-amber-500" };

const start: SchedulerEvent[] = [
  ev("1", "Weekly planning", 0, 9, 30, 60, "violet", "Atlas room"),
  ev("2", "Design review", 0, 11, 0, 90, "blue", "Zoom"),
  ev("3", "Lunch with Amara", 0, 12, 30, 60, "green", "Café Lumen"),
  ev("4", "Hiring sync", 1, 10, 0, 45, "blue"),
  ev("5", "Pricing workshop", 1, 10, 30, 120, "blue", "Atlas room"),
  ev("6", "1:1 Diego", 1, 15, 0, 30, "violet"),
  ev("7", "Customer call · Kumo", 2, 9, 0, 45, "blue", "Meet"),
  ev("8", "Focus time", 2, 13, 0, 180, "gray"),
  ev("9", "Gym", 2, 18, 0, 60, "green"),
  ev("10", "Standup", 3, 9, 15, 15, "violet"),
  ev("11", "Roadmap review", 3, 14, 0, 60, "blue", "Atlas room"),
  ev("12", "Flight to Lisbon", 4, 16, 30, 165, "amber", "LHR T5"),
  ev("13", "Demo day", 4, 10, 0, 90, "violet"),
  ev("14", "Brunch", 5, 11, 0, 90, "green"),
  { id: "15", title: "Offsite · Lisbon", start: at(4, 0), end: at(7, 0), allDay: true, color: "amber" },
];

export default function Demo() {
  const [events, setEvents] = useState(start);
  const [date, setDate] = useState(new Date());
  const [hidden, setHidden] = useState<string[]>([]);
  const visible = useMemo(() => events.filter((e) => !hidden.includes(e.color ?? "blue")), [events, hidden]);

  const addEvent = () => {
    const s = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 16, 0);
    setEvents([...events, { id: String(Date.now()), title: "New event", start: s, end: new Date(s.getTime() + 3600000), color: "blue" }]);
  };

  return (
    <div className="@container flex h-[680px] w-full overflow-hidden rounded-[18px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04),0_16px_40px_-16px_rgb(0_0_0/0.16)] ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.1]">
      <aside className="hidden w-[284px] shrink-0 flex-col gap-4 border-r border-black/[0.06] bg-neutral-50 p-3 @[860px]:flex dark:border-white/[0.07] dark:bg-neutral-950">
        <button
          onClick={addEvent}
          className="flex h-9 items-center justify-center gap-1.5 rounded-[var(--ui-radius,10px)] bg-[var(--ui-accent,#0a0a0a)] text-[13px] font-medium text-[var(--ui-accent-fg,#fff)] shadow-[inset_0_1px_0_rgb(255_255_255/0.15)] outline-none transition-transform active:scale-[0.98] dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]"
        >
          <Plus className="size-4" />
          New event
        </button>
        <Calendar variant="plain" weekStartsOn={1} selected={date} onSelect={(d) => d && setDate(d)} month={date} onMonthChange={setDate} markers={events.map((e) => e.start)} className="-mx-1.5" />
        <div>
          <p className="px-1 pb-1.5 text-[12px] font-medium text-neutral-400">My calendars</p>
          {calendars.map((c) => {
            const on = !hidden.includes(c.id);
            return (
              <button
                key={c.id}
                onClick={() => setHidden(on ? [...hidden, c.id] : hidden.filter((h) => h !== c.id))}
                aria-pressed={on}
                className="flex h-8 w-full items-center gap-2.5 rounded-[8px] px-1.5 text-left text-[13px] text-neutral-700 outline-none transition-colors hover:bg-neutral-950/[0.04] dark:text-neutral-300 dark:hover:bg-white/[0.05]"
              >
                <span className={cn("flex size-4 items-center justify-center rounded-[5px] text-white transition-colors", on ? SWATCH[c.id] : "ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600")}>
                  {on && <Check className="size-3" strokeWidth={3} />}
                </span>
                {c.name}
              </button>
            );
          })}
        </div>
      </aside>
      <div className="min-w-0 flex-1">
        <Scheduler events={visible} onEventsChange={(next) => setEvents([...next, ...events.filter((e) => hidden.includes(e.color ?? "blue"))])} date={date} onDateChange={setDate} startHour={6} endHour={22} />
      </div>
    </div>
  );
}

31:T566,"use client"; import { useState } from "react"; import { Scheduler, type SchedulerEvent } from "@/components/scalar-ui/scheduler"; const today = new Date(); const at = (h: number, m = 0) => new Date(today.getFullYear(), today.getMonth(), today.getDate(), h, m); export default function Example() { const [events, setEvents] = useState([ { id: "1", title: "Standup", start: at(9), end: at(9, 15), color: "violet" }, { id: "2", title: "Interview · Product designer", start: at(10), end: at(11), color: "blue", location: "Room 2" }, { id: "3", title: "Interview debrief", start: at(10, 30), end: at(11, 15), color: "rose" }, { id: "4", title: "Lunch", start: at(12, 30), end: at(13, 30), color: "green" }, { id: "5", title: "Write the Q4 memo", start: at(14), end: at(16, 30), color: "gray" }, { id: "6", title: "Vendor call", start: at(15), end: at(15, 30), color: "amber" }, { id: "7", title: "Pick up the kids", start: at(17, 15), end: at(17, 45), color: "green" }, ]); return (

); } 32:T4586,

"use client";

import { useState } from "react";
import { Scheduler, type SchedulerEvent } from "@/components/scalar-ui/scheduler";

const today = new Date();
const at = (h: number, m = 0) => new Date(today.getFullYear(), today.getMonth(), today.getDate(), h, m);

export default function Example() {
  const [events, setEvents] = useState<SchedulerEvent[]>([
    { id: "1", title: "Standup", start: at(9), end: at(9, 15), color: "violet" },
    { id: "2", title: "Interview · Product designer", start: at(10), end: at(11), color: "blue", location: "Room 2" },
    { id: "3", title: "Interview debrief", start: at(10, 30), end: at(11, 15), color: "rose" },
    { id: "4", title: "Lunch", start: at(12, 30), end: at(13, 30), color: "green" },
    { id: "5", title: "Write the Q4 memo", start: at(14), end: at(16, 30), color: "gray" },
    { id: "6", title: "Vendor call", start: at(15), end: at(15, 30), color: "amber" },
    { id: "7", title: "Pick up the kids", start: at(17, 15), end: at(17, 45), color: "green" },
  ]);
  return (
    <div className="h-[600px] w-full max-w-[560px] overflow-hidden rounded-[18px] bg-white ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]">
      <Scheduler events={events} onEventsChange={setEvents} defaultView="day" views={["day", "agenda"]} startHour={7} endHour={20} hourHeight={56} scrollToHour={8.5} />
    </div>
  );
}

33:T618,"use client"; import { useState } from "react"; import { Scheduler, type EventColor, type SchedulerEvent } from "@/components/scalar-ui/scheduler"; const now = new Date(); const day = (d: number, h = 9, m = 0) => new Date(now.getFullYear(), now.getMonth(), d, h, m); const e = (id: string, title: string, d: number, h: number, mins: number, color: EventColor): SchedulerEvent => ({ id, title, start: day(d, h), end: new Date(day(d, h).getTime() + mins * 60000), color }); export default function Example() { const [events, setEvents] = useState([ e("1", "Board meeting", 2, 10, 120, "violet"), e("2", "Ship v2.4", 5, 16, 30, "rose"), e("3", "Standup", 8, 9, 15, "blue"), e("4", "Design crit", 8, 11, 60, "blue"), e("5", "Investor update", 8, 14, 45, "amber"), e("6", "Team dinner", 8, 19, 120, "green"), e("7", "Hack week kickoff", 12, 10, 60, "violet"), e("8", "Dentist", 15, 8, 45, "green"), e("9", "Quarterly review", 21, 13, 90, "blue"), e("10", "Release notes due", 24, 17, 30, "rose"), { id: "11", title: "Hack week", start: day(12, 0), end: day(17, 0), allDay: true, color: "violet" }, { id: "12", title: "Maya out", start: day(26, 0), end: day(29, 0), allDay: true, color: "amber" }, ]); return (

); } 34:T5d14,

"use client";

import { useState } from "react";
import { Scheduler, type EventColor, type SchedulerEvent } from "@/components/scalar-ui/scheduler";

const now = new Date();
const day = (d: number, h = 9, m = 0) => new Date(now.getFullYear(), now.getMonth(), d, h, m);
const e = (id: string, title: string, d: number, h: number, mins: number, color: EventColor): SchedulerEvent => ({ id, title, start: day(d, h), end: new Date(day(d, h).getTime() + mins * 60000), color });

export default function Example() {
  const [events, setEvents] = useState<SchedulerEvent[]>([
    e("1", "Board meeting", 2, 10, 120, "violet"),
    e("2", "Ship v2.4", 5, 16, 30, "rose"),
    e("3", "Standup", 8, 9, 15, "blue"),
    e("4", "Design crit", 8, 11, 60, "blue"),
    e("5", "Investor update", 8, 14, 45, "amber"),
    e("6", "Team dinner", 8, 19, 120, "green"),
    e("7", "Hack week kickoff", 12, 10, 60, "violet"),
    e("8", "Dentist", 15, 8, 45, "green"),
    e("9", "Quarterly review", 21, 13, 90, "blue"),
    e("10", "Release notes due", 24, 17, 30, "rose"),
    { id: "11", title: "Hack week", start: day(12, 0), end: day(17, 0), allDay: true, color: "violet" },
    { id: "12", title: "Maya out", start: day(26, 0), end: day(29, 0), allDay: true, color: "amber" },
  ]);
  return (
    <div className="h-[620px] w-full overflow-hidden rounded-[18px] bg-white ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]">
      <Scheduler events={events} onEventsChange={setEvents} defaultView="month" views={["day", "week", "month"]} />
    </div>
  );
}

35:T501,"use client"; import { Scheduler, type SchedulerEvent } from "@/components/scalar-ui/scheduler"; const now = new Date(); const at = (d: number, h: number, m = 0) => new Date(now.getFullYear(), now.getMonth(), now.getDate() + d, h, m); const events: SchedulerEvent[] = [ { id: "1", title: "Standup", start: at(0, 9, 15), end: at(0, 9, 30), color: "violet" }, { id: "2", title: "Lunch with Hana", start: at(0, 12, 30), end: at(0, 13, 30), color: "green", location: "Kumo Kitchen" }, { id: "3", title: "Contract review", start: at(1, 10), end: at(1, 11), color: "blue", location: "Legal room" }, { id: "4", title: "Team offsite", start: at(3, 0), end: at(5, 0), allDay: true, color: "amber" }, { id: "5", title: "Flight home", start: at(4, 18), end: at(4, 21), color: "amber", location: "LIS → LHR" }, { id: "6", title: "Quarter close", start: at(7, 15), end: at(7, 16, 30), color: "rose" }, { id: "7", title: "Yoga", start: at(8, 7), end: at(8, 8), color: "green" }, ]; export default function Example() { return (

); } 36:T439c,

"use client";

import { Scheduler, type SchedulerEvent } from "@/components/scalar-ui/scheduler";

const now = new Date();
const at = (d: number, h: number, m = 0) => new Date(now.getFullYear(), now.getMonth(), now.getDate() + d, h, m);

const events: SchedulerEvent[] = [
  { id: "1", title: "Standup", start: at(0, 9, 15), end: at(0, 9, 30), color: "violet" },
  { id: "2", title: "Lunch with Hana", start: at(0, 12, 30), end: at(0, 13, 30), color: "green", location: "Kumo Kitchen" },
  { id: "3", title: "Contract review", start: at(1, 10), end: at(1, 11), color: "blue", location: "Legal room" },
  { id: "4", title: "Team offsite", start: at(3, 0), end: at(5, 0), allDay: true, color: "amber" },
  { id: "5", title: "Flight home", start: at(4, 18), end: at(4, 21), color: "amber", location: "LIS → LHR" },
  { id: "6", title: "Quarter close", start: at(7, 15), end: at(7, 16, 30), color: "rose" },
  { id: "7", title: "Yoga", start: at(8, 7), end: at(8, 8), color: "green" },
];

export default function Example() {
  return (
    <div className="h-[520px] w-full max-w-[600px] overflow-hidden rounded-[18px] bg-white ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]">
      <Scheduler events={events} defaultView="agenda" views={[]} />
    </div>
  );
}

37:Tf63,"use client"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { useState } from "react"; import { ResourceTimeline, type EventColor, type ResourceEvent } from "@/components/scalar-ui/scheduler"; const face = (id: string) => `https://images.unsplash.com/photo-${id}?w=64&h=64&fit=crop&crop=faces&auto=format&q=75`; const people = [ { id: "amara", name: "Amara Okafor", subtitle: "Support lead", photo: "1531123897727-8f129e1688ce" }, { id: "diego", name: "Diego Alvarez", subtitle: "Support", photo: "1506794778202-cad84cf45f1d" }, { id: "hana", name: "Hana Sato", subtitle: "Support", photo: "1544005313-94ddf0286df2" }, { id: "liam", name: "Liam Novak", subtitle: "On call engineer", photo: "1472099645785-5658abf4ff4e" }, { id: "priya", name: "Priya Raman", subtitle: "Success", photo: "1580489944761-15a19d654956" }, { id: "theo", name: "Theo Laurent", subtitle: "Success", photo: "1539571696357-5a69c17a67c6" }, ]; export default function Example() { const [date, setDate] = useState(() => { const d = new Date(); return new Date(d.getFullYear(), d.getMonth(), d.getDate()); }); const at = (h: number, m = 0) => new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, m); const shift = (id: string, who: string, title: string, a: number, b: number, color: EventColor): ResourceEvent => ({ id, resourceId: who, title, start: at(Math.floor(a), (a % 1) * 60), end: at(Math.floor(b), (b % 1) * 60), color }); const [events, setEvents] = useState(() => [ shift("1", "amara", "Morning queue", 8, 12, "blue"), shift("2", "amara", "Escalations", 13, 16, "rose"), shift("3", "diego", "Chat", 9, 13, "blue"), shift("4", "diego", "Training", 14, 15.5, "violet"), shift("5", "hana", "Late queue", 12, 19, "blue"), shift("6", "liam", "On call", 8, 20, "amber"), shift("7", "liam", "Incident review", 11, 12, "rose"), shift("8", "priya", "Onboarding · Kumo", 10, 11.5, "green"), shift("9", "priya", "QBR · Northwind", 14, 15, "green"), shift("10", "theo", "Renewals", 9.5, 12.5, "green"), ]); return (

Support rota

{date.toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" })}

{[-1, 1].map((d) => ( ))}

({ ...p, avatar:

}))} events={events} onEventsChange={setEvents} newEventTitle="New shift" />

); } 38:Tac37,

"use client";

import { ChevronLeft, ChevronRight } from "lucide-react";
import { useState } from "react";
import { ResourceTimeline, type EventColor, type ResourceEvent } from "@/components/scalar-ui/scheduler";

const face = (id: string) => `https://images.unsplash.com/photo-${id}?w=64&h=64&fit=crop&crop=faces&auto=format&q=75`;

const people = [
  { id: "amara", name: "Amara Okafor", subtitle: "Support lead", photo: "1531123897727-8f129e1688ce" },
  { id: "diego", name: "Diego Alvarez", subtitle: "Support", photo: "1506794778202-cad84cf45f1d" },
  { id: "hana", name: "Hana Sato", subtitle: "Support", photo: "1544005313-94ddf0286df2" },
  { id: "liam", name: "Liam Novak", subtitle: "On call engineer", photo: "1472099645785-5658abf4ff4e" },
  { id: "priya", name: "Priya Raman", subtitle: "Success", photo: "1580489944761-15a19d654956" },
  { id: "theo", name: "Theo Laurent", subtitle: "Success", photo: "1539571696357-5a69c17a67c6" },
];

export default function Example() {
  const [date, setDate] = useState(() => {
    const d = new Date();
    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
  });
  const at = (h: number, m = 0) => new Date(date.getFullYear(), date.getMonth(), date.getDate(), h, m);
  const shift = (id: string, who: string, title: string, a: number, b: number, color: EventColor): ResourceEvent => ({ id, resourceId: who, title, start: at(Math.floor(a), (a % 1) * 60), end: at(Math.floor(b), (b % 1) * 60), color });
  const [events, setEvents] = useState<ResourceEvent[]>(() => [
    shift("1", "amara", "Morning queue", 8, 12, "blue"),
    shift("2", "amara", "Escalations", 13, 16, "rose"),
    shift("3", "diego", "Chat", 9, 13, "blue"),
    shift("4", "diego", "Training", 14, 15.5, "violet"),
    shift("5", "hana", "Late queue", 12, 19, "blue"),
    shift("6", "liam", "On call", 8, 20, "amber"),
    shift("7", "liam", "Incident review", 11, 12, "rose"),
    shift("8", "priya", "Onboarding · Kumo", 10, 11.5, "green"),
    shift("9", "priya", "QBR · Northwind", 14, 15, "green"),
    shift("10", "theo", "Renewals", 9.5, 12.5, "green"),
  ]);
  return (
    <div className="flex h-[480px] w-full flex-col overflow-hidden rounded-[18px] bg-white ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]">
      <div className="flex shrink-0 items-center gap-2 border-b border-black/[0.06] px-3 py-2.5 dark:border-white/[0.07]">
        <p className="text-[15px] font-semibold text-neutral-950 dark:text-white">Support rota</p>
        <span className="text-[12.5px] text-neutral-500">{date.toLocaleDateString("en-US", { weekday: "long", month: "short", day: "numeric" })}</span>
        <div className="ml-auto flex">
          {[-1, 1].map((d) => (
            <button
              key={d}
              aria-label={d < 0 ? "Previous day" : "Next day"}
              onClick={() => {
                const next = new Date(date.getFullYear(), date.getMonth(), date.getDate() + d);
                setEvents((list) => list.map((e) => ({ ...e, start: new Date(e.start.getTime() + d * 86400000), end: new Date(e.end.getTime() + d * 86400000) })));
                setDate(next);
              }}
              className="flex size-8 items-center justify-center rounded-[9px] text-neutral-500 hover:bg-neutral-950/[0.05] hover:text-neutral-900 dark:hover:bg-white/[0.08] dark:hover:text-white"
            >
              {d < 0 ? <ChevronLeft className="size-4" /> : <ChevronRight className="size-4" />}
            </button>
          ))}
        </div>
      </div>
      <div className="min-h-0 flex-1">
        <ResourceTimeline
          label="Person"
          date={date}
          resources={people.map((p) => ({ ...p, avatar: <img src={face(p.photo)} alt="" className="size-8 shrink-0 rounded-full object-cover" /> }))}
          events={events}
          onEventsChange={setEvents}
          newEventTitle="New shift"
        />
      </div>
    </div>
  );
}

39:T74c,"use client"; import { useState } from "react"; import { ResourceTimeline, type ResourceEvent } from "@/components/scalar-ui/scheduler"; const rooms = [ { id: "atlas", name: "Atlas", subtitle: "12 seats · Screen", tone: "bg-sky-500" }, { id: "basalt", name: "Basalt", subtitle: "6 seats", tone: "bg-emerald-500" }, { id: "cove", name: "Cove", subtitle: "4 seats · Phone booth", tone: "bg-amber-500" }, { id: "dune", name: "Dune", subtitle: "20 seats · Stage", tone: "bg-violet-500" }, ]; export default function Example() { const today = new Date(); const at = (h: number, m = 0) => new Date(today.getFullYear(), today.getMonth(), today.getDate(), h, m); const [events, setEvents] = useState([ { id: "1", resourceId: "atlas", title: "Design review", start: at(9, 30), end: at(11), color: "blue" }, { id: "2", resourceId: "atlas", title: "Sales kickoff", start: at(14), end: at(15, 30), color: "blue" }, { id: "3", resourceId: "basalt", title: "Interview", start: at(10), end: at(11), color: "green" }, { id: "4", resourceId: "basalt", title: "1:1", start: at(10, 30), end: at(11), color: "green" }, { id: "5", resourceId: "cove", title: "Call", start: at(12), end: at(12, 30), color: "amber" }, { id: "6", resourceId: "dune", title: "All hands", start: at(16), end: at(17), color: "violet" }, ]); return (

({ ...r, avatar: }))} events={events} onEventsChange={setEvents} />

); } 3a:T531d,

"use client";

import { useState } from "react";
import { ResourceTimeline, type ResourceEvent } from "@/components/scalar-ui/scheduler";

const rooms = [
  { id: "atlas", name: "Atlas", subtitle: "12 seats · Screen", tone: "bg-sky-500" },
  { id: "basalt", name: "Basalt", subtitle: "6 seats", tone: "bg-emerald-500" },
  { id: "cove", name: "Cove", subtitle: "4 seats · Phone booth", tone: "bg-amber-500" },
  { id: "dune", name: "Dune", subtitle: "20 seats · Stage", tone: "bg-violet-500" },
];

export default function Example() {
  const today = new Date();
  const at = (h: number, m = 0) => new Date(today.getFullYear(), today.getMonth(), today.getDate(), h, m);
  const [events, setEvents] = useState<ResourceEvent[]>([
    { id: "1", resourceId: "atlas", title: "Design review", start: at(9, 30), end: at(11), color: "blue" },
    { id: "2", resourceId: "atlas", title: "Sales kickoff", start: at(14), end: at(15, 30), color: "blue" },
    { id: "3", resourceId: "basalt", title: "Interview", start: at(10), end: at(11), color: "green" },
    { id: "4", resourceId: "basalt", title: "1:1", start: at(10, 30), end: at(11), color: "green" },
    { id: "5", resourceId: "cove", title: "Call", start: at(12), end: at(12, 30), color: "amber" },
    { id: "6", resourceId: "dune", title: "All hands", start: at(16), end: at(17), color: "violet" },
  ]);
  return (
    <div className="h-[340px] w-full overflow-hidden rounded-[18px] bg-white ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:ring-white/[0.1]">
      <ResourceTimeline
        label="Rooms"
        date={today}
        startHour={8}
        endHour={19}
        hourWidth={76}
        resources={rooms.map((r) => ({ ...r, avatar: <span className={`size-8 shrink-0 rounded-[9px] ${r.tone} opacity-90`} /> }))}
        events={events}
        onEventsChange={setEvents}
      />
    </div>
  );
}

3b:T284d,"use client"; import { AnimatePresence, motion } from "motion/react"; import { ArrowLeft, CalendarCheck, Clock, Globe, Video } from "lucide-react"; import { useState } from "react"; import { Calendar } from "@/components/scalar-ui/calendar"; import { cn } from "@/lib/utils"; const face = "https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=96&h=96&fit=crop&crop=faces&auto=format&q=75"; const SPRING = { type: "spring", bounce: 0.15, duration: 0.4 } as const; const slotsFor = (d: Date) => { const seed = d.getDate(); return ["9:00", "9:30", "10:00", "11:00", "11:30", "13:30", "14:00", "15:00", "16:30"].filter((_, i) => (i * 7 + seed) % 4 !== 0); }; export default function Example() { const today = new Date(); const [day, setDay] = useState(); const [slot, setSlot] = useState(null); const [step, setStep] = useState<"pick" | "details" | "done">("pick"); const [name, setName] = useState(""); const [email, setEmail] = useState(""); const label = day?.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" }); const input = "h-9 w-full rounded-[10px] bg-white px-3 text-[13px] text-neutral-950 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.08] outline-none transition-shadow placeholder:text-neutral-400 focus:ring-neutral-950/30 dark:bg-white/[0.04] dark:text-white dark:ring-white/[0.1] dark:focus:ring-white/30"; return (

Amara Okafor

Intro call

30 minutes
Europe / London

{day && slot && ( {label}, {slot} )}

{step === "pick" && (

d.getDay() === 0 || d.getDay() === 6} selected={day} onSelect={(d) => (setDay(d), setSlot(null))} />

{day ? ( <>

{day.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" })}

{slotsFor(day).map((s, i) => ( {slot === s && ( setStep("details")} className="hidden h-9 shrink-0 overflow-hidden rounded-[10px] bg-[var(--ui-accent,#0a0a0a)] text-[13px] font-medium text-[var(--ui-accent-fg,#fff)] @[640px]:block dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]" > Next )} ))}

{slot && ( )} ) : (

Pick a day to see open times.

)}

)} {step === "details" && ( (e.preventDefault(), setStep("done"))} className="flex max-w-[400px] flex-col gap-3 p-5" > Your name setName(e.target.value)} placeholder="Maya Chen" className={input} /> Email setEmail(e.target.value)} placeholder="maya@example.com" className={input} /> Anything to share first?

</label>
 <button type="submit" className="mt-1 h-9 rounded-[10px] bg-[var(--ui-accent,#0a0a0a)] text-[13px] font-medium text-[var(--ui-accent-fg,#fff)] shadow-[inset_0_1px_0_rgb(255_255_255/0.15)] dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]">
 Confirm booking
 </button>
 </motion.form>
 )}
 {step === "done" && (
 <motion.div key="done" initial={{ opacity: 0, scale: 0.97 }} animate={{ opacity: 1, scale: 1 }} transition={SPRING} className="flex h-full min-h-[380px] flex-col items-center justify-center gap-2 p-6 text-center">
 <motion.span initial={{ scale: 0.6 }} animate={{ scale: 1 }} transition={{ type: "spring", bounce: 0.45, duration: 0.5 }} className="flex size-11 items-center justify-center rounded-full bg-emerald-500 text-white">
 <CalendarCheck className="size-5" />
 </motion.span>
 You’re booked
 
 {label} at {slot}. An invite is on its way to {email || "your inbox"}.
 
 <button onClick={() => (setStep("pick"), setSlot(null), setDay(undefined))} className="mt-3 h-8 rounded-[9px] px-3 text-[12.5px] font-medium text-neutral-700 ring-1 ring-black/[0.08] dark:text-neutral-300 dark:ring-white/[0.1]">
 Book another time
 </button>
 </motion.div>
 )}
 </AnimatePresence>
 </div>
 </div>
 </div>
 );
}
3c:T155d5,<pre class="shiki shiki-themes github-light github-dark-default" style="--shiki-light:#24292e;--shiki-dark:#e6edf3;--shiki-light-bg:#fff;--shiki-dark-bg:#0d1117" tabindex="0"><code>"use client";

import { AnimatePresence, motion } from "motion/react";
import { ArrowLeft, CalendarCheck, Clock, Globe, Video } from "lucide-react";
import { useState } from "react";
import { Calendar } from "@/components/scalar-ui/calendar";
import { cn } from "@/lib/utils";

const face = "https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=96&h=96&fit=crop&crop=faces&auto=format&q=75";
const SPRING = { type: "spring", bounce: 0.15, duration: 0.4 } as const;

const slotsFor = (d: Date) => {
 const seed = d.getDate();
 return ["9:00", "9:30", "10:00", "11:00", "11:30", "13:30", "14:00", "15:00", "16:30"].filter((_, i) => (i * 7 + seed) % 4 !== 0);
};

export default function Example() {
 const today = new Date();
 const [day, setDay] = useState<Date | undefined>();
 const [slot, setSlot] = useState<string | null>(null);
 const [step, setStep] = useState<"pick" | "details" | "done">("pick");
 const [name, setName] = useState("");
 const [email, setEmail] = useState("");

 const label = day?.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" });
 const input = "h-9 w-full rounded-[10px] bg-white px-3 text-[13px] text-neutral-950 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.08] outline-none transition-shadow placeholder:text-neutral-400 focus:ring-neutral-950/30 dark:bg-white/[0.04] dark:text-white dark:ring-white/[0.1] dark:focus:ring-white/30";

 return (
 <div className="@container w-full max-w-[860px] overflow-hidden rounded-[20px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04),0_16px_40px_-16px_rgb(0_0_0/0.16)] ring-1 ring-black/[0.08] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.1]">
 <div className="flex flex-col @[640px]:flex-row">
 <section className="flex shrink-0 flex-col gap-3 border-b border-black/[0.06] p-5 @[640px]:w-[240px] @[640px]:border-b-0 @[640px]:border-r dark:border-white/[0.07]">
 <img src={face} alt="Amara Okafor" className="size-10 rounded-full object-cover" />
 <div>
 <p className="text-[12.5px] text-neutral-500">Amara Okafor</p>
 <h3 className="mt-0.5 text-[18px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">Intro call</h3>
 </div>
 <ul className="flex flex-col gap-2 text-[12.5px] text-neutral-600 dark:text-neutral-400">
 <li className="flex items-center gap-2">
 <Clock className="size-3.5" />
 30 minutes
 </li>
 <li className="flex items-center gap-2">
 <Video className="size-3.5" />
 Video call, link sent after booking
 </li>
 <li className="flex items-center gap-2">
 <Globe className="size-3.5" />
 Europe / London
 </li>
 </ul>
 <AnimatePresence>
 {day && slot && (
 <motion.p initial={{ opacity: 0, y: 4 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} transition={SPRING} className="rounded-[12px] bg-neutral-950/[0.04] p-2.5 text-[12.5px] font-medium text-neutral-800 dark:bg-white/[0.06] dark:text-neutral-200">
 {label}, {slot}
 </motion.p>
 )}
 </AnimatePresence>
 </section>
 <div className="relative min-h-[380px] flex-1">
 <AnimatePresence mode="popLayout" initial={false}>
 {step === "pick" && (
 <motion.div key="pick" initial={{ opacity: 0, x: -12 }} animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: -12 }} transition={SPRING} className="flex flex-col @[640px]:flex-row">
 <div className="p-4">
 <Calendar variant="plain" min={today} disabled={(d) => d.getDay() === 0 || d.getDay() === 6} selected={day} onSelect={(d) => (setDay(d), setSlot(null))} />
 </div>
 <div className="flex-1 border-t border-black/[0.06] p-4 @[640px]:border-l @[640px]:border-t-0 dark:border-white/[0.07]">
 {day ? (
 <>
 <p className="pb-2 text-[13px] font-medium text-neutral-950 dark:text-white">{day.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" })}</p>
 <div className="grid grid-cols-3 gap-1.5 @[640px]:grid-cols-1">
 {slotsFor(day).map((s, i) => (
 <motion.div key={`${day.toDateString()}-${s}`} initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} transition={{ ...SPRING, delay: i * 0.02 }} className="flex gap-1.5">
 <button
 onClick={() => setSlot(slot === s ? null : s)}
 className={cn(
 "h-9 flex-1 rounded-[10px] text-[13px] font-medium tabular-nums ring-1 outline-none transition-colors",
 slot === s ? "bg-neutral-950/[0.06] text-neutral-950 ring-neutral-950/20 dark:bg-white/[0.1] dark:text-white dark:ring-white/25" : "text-neutral-700 ring-black/[0.08] hover:ring-black/20 dark:text-neutral-300 dark:ring-white/[0.1] dark:hover:ring-white/25",
 )}
 >
 {s}
 </button>
 <AnimatePresence>
 {slot === s && (
 <motion.button
 initial={{ width: 0, opacity: 0 }}
 animate={{ width: 76, opacity: 1 }}
 exit={{ width: 0, opacity: 0 }}
 transition={SPRING}
 onClick={() => setStep("details")}
 className="hidden h-9 shrink-0 overflow-hidden rounded-[10px] bg-[var(--ui-accent,#0a0a0a)] text-[13px] font-medium text-[var(--ui-accent-fg,#fff)] @[640px]:block dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]"
 >
 Next
 </motion.button>
 )}
 </AnimatePresence>
 </motion.div>
 ))}
 </div>
 {slot && (
 <button onClick={() => setStep("details")} className="mt-3 h-9 w-full rounded-[10px] bg-[var(--ui-accent,#0a0a0a)] text-[13px] font-medium text-[var(--ui-accent-fg,#fff)] @[640px]:hidden dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]">
 Next
 </button>
 )}
 </>
 ) : (
 <p className="pt-2 text-[13px] text-neutral-500">Pick a day to see open times.</p>
 )}
 </div>
 </motion.div>
 )}
 {step === "details" && (
 <motion.form
 key="details"
 initial={{ opacity: 0, x: 12 }}
 animate={{ opacity: 1, x: 0 }}
 exit={{ opacity: 0, x: 12 }}
 transition={SPRING}
 onSubmit={(e) => (e.preventDefault(), setStep("done"))}
 className="flex max-w-[400px] flex-col gap-3 p-5"
 >
 <button type="button" onClick={() => setStep("pick")} className="flex items-center gap-1 self-start text-[12.5px] text-neutral-500 hover:text-neutral-900 dark:hover:text-white">
 <ArrowLeft className="size-3.5" />
 Back
 </button>
 <label className="flex flex-col gap-1.5 text-[12.5px] font-medium text-neutral-700 dark:text-neutral-300">
 Your name
 <input required value={name} onChange={(e) => setName(e.target.value)} placeholder="Maya Chen" className={input} />
 </label>
 <label className="flex flex-col gap-1.5 text-[12.5px] font-medium text-neutral-700 dark:text-neutral-300">
 Email
 <input required type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="maya@example.com" className={input} />
 </label>
 <label className="flex flex-col gap-1.5 text-[12.5px] font-medium text-neutral-700 dark:text-neutral-300">
 Anything to share first?
 <textarea rows={3} placeholder="Optional" className={cn(input, "h-auto resize-none py-2")} />
 </label>
 <button type="submit" className="mt-1 h-9 rounded-[10px] bg-[var(--ui-accent,#0a0a0a)] text-[13px] font-medium text-[var(--ui-accent-fg,#fff)] shadow-[inset_0_1px_0_rgb(255_255_255/0.15)] dark:bg-[var(--ui-accent,#fff)] dark:text-[var(--ui-accent-fg,#0a0a0a)]">
 Confirm booking
 </button>
 </motion.form>
 )}
 {step === "done" && (
 <motion.div key="done" initial={{ opacity: 0, scale: 0.97 }} animate={{ opacity: 1, scale: 1 }} transition={SPRING} className="flex h-full min-h-[380px] flex-col items-center justify-center gap-2 p-6 text-center">
 <motion.span initial={{ scale: 0.6 }} animate={{ scale: 1 }} transition={{ type: "spring", bounce: 0.45, duration: 0.5 }} className="flex size-11 items-center justify-center rounded-full bg-emerald-500 text-white">
 <CalendarCheck className="size-5" />
 </motion.span>
 <p className="mt-1 text-[16px] font-semibold text-neutral-950 dark:text-white">You’re booked</p>
 <p className="max-w-[280px] text-[13px] text-neutral-500">
 {label} at {slot}. An invite is on its way to {email || "your inbox"}.
 </p>
 <button onClick={() => (setStep("pick"), setSlot(null), setDay(undefined))} className="mt-3 h-8 rounded-[9px] px-3 text-[12.5px] font-medium text-neutral-700 ring-1 ring-black/[0.08] dark:text-neutral-300 dark:ring-white/[0.1]">
 Book another time
 </button>
 </motion.div>
 )}
 </AnimatePresence>
 </div>
 </div>
 </div>
 );
}
</code></pre>29:["$","section","scheduler",{"id":"scheduler","aria-labelledby":"scheduler-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"scheduler-title","className":"sr-only","children":"Scheduler"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"scheduler","gated":{"unlocked":true,"files":[{"name":"scheduler.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"day-view":{"name":"day-view.tsx","code":"$31","html":"$32"},"month":{"name":"month.tsx","code":"$33","html":"$34"},"agenda":{"name":"agenda.tsx","code":"$35","html":"$36"},"team-rota":{"name":"team-rota.tsx","code":"$37","html":"$38"},"rooms":{"name":"rooms.tsx","code":"$39","html":"$3a"},"booking":{"name":"booking.tsx","code":"$3b","html":"$3c"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add scheduler","shadcn":"npx shadcn@latest add https://scalarui.com/r/scheduler.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L3d","toolbar":"$L3e"}]}],["$L3f","$L40","$L41","$L42","$L43","$L44"]]}]
</article></body></html>

Schedulers

Schedulers

Day

Month

Agenda

Team Rota

Rooms

Booking Page