Month grid selectforms
Month grid for bulk date selection with select all, weekday columns, week rows, shift-click ranges and a polite selection count.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/month-grid-selectDefault
month-grid-select-demo.tsx
"use client";
import * as React from "react";import { isoWeekday, type DateOnly } from "@plott/webkit-time";import { MonthGridSelect } from "@/components/ui/month-grid-select";
const isTuesday = (date: DateOnly) => isoWeekday(date) === 2;
export default function MonthGridSelectDemo() { const [dates, setDates] = React.useState<DateOnly[]>([]); return ( <div className="flex flex-col gap-2"> <MonthGridSelect aria-label="Closed days" defaultMonth="2028-02-01" today="2028-02-10" value={dates} onValueChange={setDates} isDateDisabled={isTuesday} /> <p className="text-sm text-muted-foreground">{dates.length > 0 ? dates.join(", ") : "Nothing chosen"}</p> </div> );}