Resource timelinehospitality
Room rack style timeline with grouped resource rows, day columns, booking bars, block overlays, virtualization, keyboard navigation and opt-in drag move and resize.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/resource-timeline의존 아이템localestatus-badgestyle
Default
resource-timeline-demo.tsx
import type { DateOnly } from "@plott/webkit-time";import { ResourceTimeline, type TimelineBar, type TimelineOverlay, type TimelineResource } from "@/components/ui/resource-timeline";
export const demoResources: TimelineResource[] = [ { id: "101", label: "101", group: "Standard" }, { id: "102", label: "102", group: "Standard" }, { id: "201", label: "201", group: "Suite" },];
export const demoBars: TimelineBar[] = [ { id: "b1", resourceId: "101", start: "2026-01-12" as DateOnly, end: "2026-01-15" as DateOnly, label: "Ada", state: "confirmed" }, { id: "b2", resourceId: "102", start: "2026-01-14" as DateOnly, end: "2026-01-16" as DateOnly, label: "Grace", state: "pending" }, { id: "b3", resourceId: "201", start: "2026-01-10" as DateOnly, end: "2026-01-13" as DateOnly, label: "Alan", state: "checked-in" },];
const demoNow = Date.UTC(2026, 0, 14, 12);
export const demoOverlays: TimelineOverlay[] = [ { id: "o1", resourceId: "102", start: "2026-01-18" as DateOnly, end: "2026-01-20" as DateOnly, kind: "outOfOrder" },];
export default function ResourceTimelineDemo() { return ( <ResourceTimeline resources={demoResources} bars={demoBars} overlays={demoOverlays} rangeStart={"2026-01-08" as DateOnly} rangeEnd={"2026-02-08" as DateOnly} now={demoNow} toneMap={{ confirmed: "success", pending: "warning", "checked-in": "info" }} showOccupancy onCreate={() => {}} onSelectBar={() => {}} /> );}