calendar

1'use client';
2 
3import {
4  DndContext,
5  type DragEndEvent,
6  PointerSensor,
7  useDraggable,
8  useDroppable,
9  useSensor,
10  useSensors,
11} from '@dnd-kit/core';
12import { CSS } from '@dnd-kit/utilities';
13import type { Locale } from 'date-fns';
14import {
15  addDays,
16  addMinutes,
17  addMonths,
18  eachDayOfInterval,
19  endOfMonth,
20  endOfWeek,
21  format,
22  isSameDay,
23  isSameMonth,
24  setHours,
25  setMinutes,
26  startOfDay,
27  startOfMonth,
28  startOfWeek,
29} from 'date-fns';
30import { ChevronLeft, ChevronRight } from 'lucide-react';
31import * as React from 'react';
32import { Button } from '@/components/ui/button';
33import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
34import { cn } from '@/lib/utils';
35 
36export type CalendarView = 'month' | 'week' | 'day' | 'agenda';
37export type CalendarEventColor = 'primary' | 'secondary' | 'accent' | 'destructive' | 'muted';
38export type CalendarSlot = { start: Date; end: Date; allDay: boolean };
39 
40export type CalendarMessages = {
41  today: string;
42  previous: string;
43  next: string;
44  allDay: string;
45  noEvents: string;
46  more: (count: number) => string;
47  views: Record<CalendarView, string>;
48};
49 
50export type CalendarMessagesInput = Partial<Omit<CalendarMessages, 'views'>> & {
51  views?: Partial<Record<CalendarView, string>>;
52};
53 
54const defaultMessages: CalendarMessages = {
55  today: 'Today',
56  previous: 'Previous',
57  next: 'Next',
58  allDay: 'all-day',
59  noEvents: 'No upcoming events',
60  more: (count) => `+${count} more`,
61  views: { month: 'Month', week: 'Week', day: 'Day', agenda: 'Agenda' },
62};
63 
64type CalendarEventLike = Record<string, unknown>;
65 
66export type CalendarRootProps<T extends CalendarEventLike> = {
67  children: React.ReactNode;
68 
69  events?: T[];
70  defaultEvents?: T[];
71  onEventsChange?: (next: T[]) => void;
72 
73  idField?: keyof T;
74  titleField: keyof T;
75  startField: keyof T;
76  endField: keyof T;
77  allDayField?: keyof T;
78  color?: (item: T) => CalendarEventColor | undefined;
79  renderEvent?: (item: T) => React.ReactNode;
80 
81  view?: CalendarView;
82  defaultView?: CalendarView;
83  onViewChange?: (v: CalendarView) => void;
84  date?: Date;
85  defaultDate?: Date;
86  onDateChange?: (d: Date) => void;
87 
88  views?: CalendarView[];
89  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
90  editable?: boolean;
91  locale?: Locale;
92  messages?: CalendarMessagesInput;
93 
94  onEventClick?: (item: T) => void;
95  onSlotSelect?: (range: CalendarSlot) => void;
96};
97 
98// … truncated