Calendar modifiersforms
Hook that turns a holiday callback and weekend flags into react-day-picker modifiers with the calendar-holiday and calendar-saturday colour tokens.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/calendar-modifiers의존 아이템style
Default
calendar-modifiers-demo.tsx
"use client";
import type { DateOnly } from "@plott/webkit-time";import { Calendar } from "@/components/ui/calendar";import { useCalendarProps } from "@/hooks/use-calendar-props";import { useCalendarModifiers } from "@/hooks/use-calendar-modifiers";
const holidays = (date: DateOnly) => (date === "2026-12-25" ? "Winter holiday" : false);
export default function CalendarModifiersDemo() { const { props: base } = useCalendarProps(); const { modifiers, modifiersClassNames } = useCalendarModifiers({ holidays, saturday: true, sundayAsHoliday: true }); return <Calendar mode="single" defaultMonth={new Date(2026, 11, 1)} modifiers={modifiers} modifiersClassNames={modifiersClassNames} {...base} />;}