A single-day calendar column that places timed events by their actual start and end time and automatically splits overlapping events into side-by-side columns.
"use client";
import DaySchedule, { type ScheduleEvent } from "@/components/ui/day-schedule";
const events: ScheduleEvent[] = [
{
id: "month-end-close",
title: "Month-end close",
start: "09:00",
end: "11:30",
detail: "Finance",
},
{
id: "standup",
title: "Standup",
start: "09:30",
end: "09:45",
detail: "Team",
},
{
id: "reconciliation-review",
title: "Reconciliation review",
start: "10:00",
end: "10:45",
},
{
id: "lunch",
title: "Lunch",
start: "12:30",
end: "13:15",
tentative: true,
},
{
id: "card-scheme-call",
title: "Card scheme call",
start: "14:00",
end: "15:00",
detail: "External",
},
{ id: "design-review", title: "Design review", start: "14:30", end: "15:30" },
{ id: "focus-block", title: "Focus block", start: "16:00", end: "18:00" },
{
id: "retro",
title: "Retro",
start: "17:00",
end: "17:45",
tentative: true,
},
];
export default function DayScheduleDemo() {
return (
<div className="w-full max-w-xl p-6">
<DaySchedule events={events} label="Today" />
</div>
);
}