calender

1import {
2  addDays,
3  addMonths,
4  addYears,
5  eachDayOfInterval,
6  endOfMonth,
7  endOfWeek,
8  endOfYear,
9  format,
10  getDay,
11  getHours,
12  getMinutes,
13  getMonth,
14  getYear,
15  isAfter,
16  isBefore,
17  isSameDay,
18  isSameMonth,
19  isToday,
20  isWeekend,
21  isWithinInterval,
22  type Locale,
23  setHours,
24  setMinutes,
25  setMonth,
26  setYear,
27  startOfDay,
28  startOfMonth,
29  startOfWeek,
30  startOfYear,
31  subDays,
32  subMonths,
33  subYears,
34} from "date-fns";
35import { enUS } from "date-fns/locale";
36import {
37  AlertCircle,
38  Calendar as CalendarIcon,
39  Check,
40  ChevronLeft,
41  ChevronRight,
42  ChevronsLeft,
43  ChevronsRight,
44  Clock,
45  X,
46} from "lucide-react";
47import { AnimatePresence, motion, useReducedMotion } from "motion/react";
48import * as React from "react";
49import {
50  useCallback,
51  useEffect,
52  useId,
53  useMemo,
54  useRef,
55  useState,
56} from "react";
57import { Button } from "@/components/ui/button";
58import {
59  Popover,
60  PopoverContent,
61  PopoverTrigger,
62} from "@/components/ui/popover";
63import { cn } from "@/lib/utils";
64 
65// ============================================================================
66// TYPES
67// ============================================================================
68 
69export type CalendarMode = "single" | "range" | "multiple";
70export type CalendarView = "days" | "months" | "years" | "time";
71export type CalendarSize = "sm" | "md" | "lg";
72 
73export interface DateRange {
74  from: Date | undefined;
75  to: Date | undefined;
76}
77 
78export interface PresetRange {
79  label: string;
80  getValue: () => DateRange;
81}
82 
83export interface CalendarLocale {
84  weekdays: string[];
85  weekdaysShort: string[];
86  months: string[];
87  monthsShort: string[];
88  today: string;
89  clear: string;
90  close: string;
91  selectTime: string;
92  backToCalendar: string;
93  selected: string;
94  weekNumber: string;
95}
96 
97// Base props shared by all modes
98interface BaseCalendarProps {
99  // Display
100  placeholder?: string;
101  disabled?: boolean;
102  readOnly?: boolean;
103  required?: boolean;
104  className?: string;
105  size?: CalendarSize;
106 
107  // Constraints
108  minDate?: Date;
109  maxDate?: Date;
110  disabledDates?: Date[];
111  disabledDaysOfWeek?: number[];
112  disableWeekends?: boolean;
113  disablePastDates?: boolean;
114  disableFutureDates?: boolean;
115 
116  // Validation
117  error?: boolean;
118  errorMessage?: string;
119 
120  // Features
121  showTime?: boolean;
122  use24Hour?: boolean;
123  minuteStep?: number;
124  showWeekNumbers?: boolean;
125  showTodayButton?: boolean;
126  showClearButton?: boolean;
127  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
128// … truncated