Event calendardata-display
Month, week and day views of events in the provider time zone with overflow, now line, keyboard navigation and slot selection.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/event-calendarDefault
event-calendar-demo.tsx
import type { DateOnly } from "@plott/webkit-time";import { EventCalendar, type CalendarEvent } from "@/components/ui/event-calendar";
export const demoEvents: CalendarEvent[] = [ { id: "1", start: Date.UTC(2026, 0, 14, 9), end: Date.UTC(2026, 0, 14, 10, 30), title: "Standup", tone: "info" }, { id: "2", start: Date.UTC(2026, 0, 14, 9, 30), end: Date.UTC(2026, 0, 14, 11), title: "Review", tone: "warning" }, { id: "3", start: Date.UTC(2026, 0, 14), end: Date.UTC(2026, 0, 15), title: "Holiday", allDay: true, tone: "success" }, { id: "4", start: Date.UTC(2026, 0, 14, 13), title: "Call" }, { id: "5", start: Date.UTC(2026, 0, 14, 15), title: "Demo", tone: "primary" }, { id: "6", start: Date.UTC(2026, 0, 13, 20), end: Date.UTC(2026, 0, 16, 6), title: "Offsite", tone: "destructive" },];
export const demoNow = Date.UTC(2026, 0, 14, 12);
export default function EventCalendarDemo() { return <EventCalendar events={demoEvents} defaultDate={"2026-01-14" as DateOnly} now={demoNow} onSelectEvent={() => {}} onSelectSlot={() => {}} />;}