Availability heatmaphospitality
Resource by day grid of open, closed, missing and partial cells with month header spans, legend and cell selection.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/availability-heatmapDefault
availability-heatmap-demo.tsx
import type { DateOnly } from "@plott/webkit-time";import { AvailabilityHeatmap, type AvailabilityStatus } from "@/components/ui/availability-heatmap";
export const rows = [ { id: "std", label: "Standard" }, { id: "dlx", label: "Deluxe" }, { id: "ste", label: "Suite" },];
export function demoStatus(rowId: string, date: DateOnly): AvailabilityStatus | undefined { const day = Number(date.slice(8, 10)); if (rowId === "ste" && day % 7 === 0) return undefined; if (day % 5 === 0) return "closed"; if (day % 3 === 0) return "partial"; return "open";}
export default function AvailabilityHeatmapDemo() { return <AvailabilityHeatmap rows={rows} start={"2026-01-27" as DateOnly} end={"2026-02-10" as DateOnly} getStatus={demoStatus} onSelectCell={() => {}} />;}