Calendar

1'use client';
2 
3import * as React from 'react';
4import type { Dispatch, SetStateAction } from 'react';
5import {
6  ChevronDownIcon,
7  ChevronLeftIcon,
8  ChevronRightIcon,
9} from 'lucide-react';
10import { cn } from '@/lib/utils';
11import { Button } from '@/components/ui/button';
12 
13interface DateRange {
14  from: Date | undefined;
15  to?: Date | undefined;
16}
17 
18interface Modifiers {
19  [key: string]:
20    | Date[]
21    | ((date: Date) => boolean)
22    | { dayOfWeek?: number[]; before?: Date; after?: Date };
23}
24 
25interface FormatOptions {
26  locale?: string;
27  [key: string]: unknown;
28}
29 
30interface CalendarBaseProps {
31  className?: string;
32  classNames?: {
33    [key: string]: string;
34  };
35 
36  showOutsideDays?: boolean;
37  showWeekNumber?: boolean;
38  numberOfMonths?: number;
39  captionLayout?: 'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years';
40  fromYear?: number;
41  toYear?: number;
42  fromMonth?: Date;
43  toMonth?: Date;
44  yearOrder?: 'asc' | 'desc';
45 
46  disabled?:
47    | Date[]
48    | ((date: Date) => boolean)
49    | { before?: Date; after?: Date; dayOfWeek?: number[] };
50 
51  modifiers?: Modifiers;
52  modifiersClassNames?: { [key: string]: string };
53 
54  locale?: string;
55  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
56  firstWeekContainsDate?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
57 
58  labels?: {
59    labelMonthDropdown?: () => string;
60    labelYearDropdown?: () => string;
61    labelNext?: () => string;
62    labelPrevious?: () => string;
63  };
64 
65  formatters?: {
66    formatCaption?: (date: Date, options?: FormatOptions) => string;
67    formatDay?: (date: Date) => string;
68    formatMonthDropdown?: (date: Date) => string;
69    formatYearDropdown?: (date: Date) => string;
70    formatWeekNumber?: (weekNumber: number) => string;
71    formatWeekdayName?: (date: Date) => string;
72  };
73 
74  onMonthChange?: (date: Date) => void;
75  onDayClick?: (date: Date, modifiers: string[]) => void;
76  onDayMouseEnter?: (date: Date, modifiers: string[]) => void;
77  onDayMouseLeave?: (date: Date, modifiers: string[]) => void;
78 
79  footer?: React.ReactNode;
80  components?: {
81    DayButton?: React.ComponentType<CalendarDayButtonProps>;
82    [key: string]: React.ComponentType<CalendarDayButtonProps> | undefined;
83  };
84 
85  animate?: boolean;
86  dir?: 'ltr' | 'rtl';
87  autoFocus?: boolean;
88  defaultMonth?: Date;
89 
90  ISOWeek?: boolean;
91  fixedWeeks?: boolean;
92 
93  buttonVariant?: string;
94}
95 
96interface CalendarProps extends CalendarBaseProps {
97  mode?: 'single' | 'multiple' | 'range';
98  selected?: Date | Date[] | DateRange;
99  onSelect?:
100// … truncated