Price calendarhospitality
Month grid that shows a price or availability state per day, highlights the lowest price and supports keyboard grid navigation.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/price-calendarDefault
price-calendar-demo.tsx
"use client";
import * as React from "react";import type { DateOnly } from "@plott/webkit-time";import { PriceCalendar, type PriceDays } from "@/components/ui/price-calendar";
const days: PriceDays = { "2028-02-27": { amount: 98 }, "2028-02-28": { amount: 120 }, "2028-02-29": { amount: 98 }, "2028-03-01": { status: "sold-out" }, "2028-03-02": { status: "closed" }, "2028-03-03": { amount: 135 },};
export default function PriceCalendarDemo() { const [picked, setPicked] = React.useState<DateOnly | null>(null); return ( <div className="flex flex-col gap-2"> <PriceCalendar aria-label="Nightly rates" defaultMonth="2028-02-01" today="2028-02-10" days={days} onSelectDate={setPicked} min="2028-01-01" max="2028-04-30" /> <p className="text-sm text-muted-foreground">{picked ?? "No date selected"}</p> </div> );}