{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "calendar", "title": "Calendar", "description": "A date-grid calendar built on react-day-picker, switchable between the Jalali (Shamsi) and Gregorian (Miladi) calendars via a calendarType prop, with an optional showHolidays prop for Iranian holiday highlighting.", "dependencies": [ "react-day-picker", "@daypicker/persian", "date-fns" ], "registryDependencies": [ "utils", "https://ui.persian-labs.ir/r/button.json", "https://ui.persian-labs.ir/r/select.json", "https://ui.persian-labs.ir/r/badge.json", "https://ui.persian-labs.ir/r/tooltip.json", "https://ui.persian-labs.ir/r/persian-date.json", "https://ui.persian-labs.ir/r/persian-holidays.json" ], "files": [ { "path": "registry/base/ui/calendar.tsx", "content": "\"use client\"\n\nimport { DayPicker as PersianDayPicker, faIR } from \"@daypicker/persian\"\nimport {\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n} from \"lucide-react\"\nimport * as React from \"react\"\nimport {\n DayPicker as GregorianDayPicker,\n getDefaultClassNames,\n} from \"react-day-picker\"\nimport { enUS } from \"react-day-picker/locale\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport {\n endOfMonth,\n isSameDay,\n startOfDay,\n startOfMonth,\n type CalendarType,\n} from \"@/lib/persian-date\"\nimport {\n getHolidaysInRange,\n type ResolvedHoliday,\n} from \"@/lib/persian-holidays\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * \"shamsi\" renders the Jalali/Solar Hijri calendar via `@daypicker/persian`\n * (faIR locale, RTL, Persian numerals by default). \"miladi\" renders the\n * plain Gregorian calendar via `react-day-picker` (enUS locale, LTR, Latin\n * numerals).\n */\nexport type { CalendarType } from \"@/lib/persian-date\"\n\n// A fixed, non-time-dependent placeholder month used only for the very first\n// render (server + initial client) when the caller controls neither `month`\n// nor `defaultMonth`. react-day-picker falls back to `new Date()` internally\n// whenever both are absent, and reading the current date during render trips\n// Next 16 Cache Components' \"blocking prerender\" guard. The real current\n// month is swapped in client-side via an effect immediately after mount.\nconst DEFAULT_MONTH_FALLBACK = new Date(2024, 0, 1)\n\ntype GregorianDayPickerProps = React.ComponentProps\ntype PersianDayPickerProps = React.ComponentProps\n\nexport type CalendarProps = GregorianDayPickerProps & {\n /** @default \"shamsi\" */\n calendarType?: CalendarType\n buttonVariant?: React.ComponentProps[\"variant\"]\n /**\n * Highlights Iranian holidays (red text) for the visible month(s) and\n * shows a hover tooltip with the holiday's title and whether it's an\n * official day off or a commemorative occasion. Uses `persian-holidays`\n * internally. @default false\n */\n showHolidays?: boolean\n}\n\nfunction Calendar({\n calendarType = \"shamsi\",\n className,\n classNames,\n showOutsideDays,\n fixedWeeks = true,\n captionLayout = \"label\",\n buttonVariant = \"ghost\",\n formatters,\n components,\n locale,\n dir,\n numerals,\n numberOfMonths,\n showHolidays = false,\n month,\n onMonthChange,\n modifiers,\n modifiersClassNames,\n ...props\n}: CalendarProps) {\n const defaultClassNames = getDefaultClassNames()\n\n // Tracks the visible month locally whenever the caller isn't already\n // controlling `month` (or hasn't supplied a static `defaultMonth`) so we\n // can snap the calendar to \"today\" once mounted, and so `showHolidays` has\n // a month to compute against. Deferred to an effect (not read at render\n // time) since \"today\" differs between server and client, and since\n // react-day-picker itself would otherwise read `new Date()` during render\n // -- see DEFAULT_MONTH_FALLBACK above.\n const [fallbackMonth, setFallbackMonth] = React.useState(null)\n React.useEffect(() => {\n if (month || props.defaultMonth) return\n const init = () => setFallbackMonth((current) => current ?? new Date())\n init()\n }, [month, props.defaultMonth])\n\n const visibleMonth = month ?? fallbackMonth ?? undefined\n const handleMonthChange = (nextMonth: Date) => {\n onMonthChange?.(nextMonth)\n if (!month) setFallbackMonth(nextMonth)\n }\n\n const holidays = React.useMemo(() => {\n if (!showHolidays || !visibleMonth) return []\n return getHolidaysInRange(\n startOfMonth(visibleMonth),\n endOfMonth(visibleMonth),\n { includeUnofficial: true }\n )\n }, [showHolidays, visibleMonth])\n\n // A day can carry both an official and an unofficial holiday at once, so\n // group by day first and let official win -- rather than assigning both\n // modifiers to the same date and leaving the result to CSS class order.\n const { officialHolidayDates, unofficialHolidayDates } = React.useMemo(() => {\n const officialByDay = new Map()\n for (const holiday of holidays) {\n const key = startOfDay(holiday.date).getTime()\n officialByDay.set(\n key,\n (officialByDay.get(key) ?? false) || holiday.official\n )\n }\n const official: Date[] = []\n const unofficial: Date[] = []\n for (const [time, isOfficial] of officialByDay) {\n ;(isOfficial ? official : unofficial).push(new Date(time))\n }\n return {\n officialHolidayDates: official,\n unofficialHolidayDates: unofficial,\n }\n }, [holidays])\n\n const resolvedModifiers = showHolidays\n ? {\n ...modifiers,\n holidayOfficial: officialHolidayDates,\n holidayUnofficial: unofficialHolidayDates,\n }\n : modifiers\n const resolvedModifiersClassNames = showHolidays\n ? {\n ...modifiersClassNames,\n holidayOfficial: \"text-destructive font-semibold\",\n holidayUnofficial: \"text-info font-semibold\",\n }\n : modifiersClassNames\n\n const resolvedLocale = locale ?? (calendarType === \"shamsi\" ? faIR : enUS)\n const resolvedDir = dir ?? (calendarType === \"shamsi\" ? \"rtl\" : \"ltr\")\n const resolvedNumerals =\n numerals ?? (calendarType === \"shamsi\" ? \"arabext\" : \"latn\")\n // With multiple months shown side by side, each month's leading/trailing\n // \"outside days\" bleed into the adjacent month's grid, so the shared\n // boundary date (e.g. the 31st) visually appears twice. Defaulting outside\n // days off for multi-month layouts avoids that -- still overridable.\n const resolvedShowOutsideDays = showOutsideDays ?? true\n\n const dayPickerProps = {\n showOutsideDays: resolvedShowOutsideDays,\n fixedWeeks,\n numberOfMonths,\n ...(visibleMonth\n ? { month: visibleMonth }\n : { defaultMonth: DEFAULT_MONTH_FALLBACK }),\n onMonthChange: handleMonthChange,\n modifiers: resolvedModifiers,\n modifiersClassNames: resolvedModifiersClassNames,\n className: cn(\n \"group/calendar bg-background p-3 [--cell-size:--spacing(10)] sm:[--cell-size:--spacing(9)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n // A Gregorian calendar retains its LTR grid by default, but it can be\n // placed within an RTL interface. Mirror only its arrow artwork in that\n // inherited RTL context; an explicit dir=\"rtl\" is handled directly by\n // the Chevron component below.\n className\n ),\n captionLayout,\n locale: resolvedLocale,\n dir: resolvedDir,\n numerals: resolvedNumerals,\n formatters: {\n formatMonthDropdown: (date: Date) =>\n date.toLocaleString(\"default\", { month: \"short\" }),\n ...formatters,\n },\n classNames: {\n root: cn(\"m-0 w-fit\", defaultClassNames.root),\n months: cn(\n \"relative flex flex-col gap-4 md:flex-row\",\n defaultClassNames.months\n ),\n month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n nav: cn(\n // Absolutely positioned and full-width so the prev/next buttons can\n // sit flush at either edge, but that leaves its empty middle\n // stretching across the whole caption row -- including right over\n // captionLayout=\"dropdown\"'s month/year Select triggers, silently\n // eating their clicks before they ever reach the trigger underneath.\n // pointer-events-none here (re-enabled per-button below) lets clicks\n // pass through the empty middle instead of dead-ending on