|
1
|
import * as React from "react" |
|
2
|
import { ChevronLeft, ChevronRight } from "lucide-react" |
|
3
|
import { DayPicker } from "react-day-picker" |
|
4
|
|
|
5
|
import { cn } from "@/lib/utils" |
|
6
|
import { buttonVariants } from "@/components/ui/button" |
|
7
|
|
|
8
|
export type CalendarProps = React.ComponentProps<typeof DayPicker> |
|
9
|
|
|
10
|
function Calendar({ |
|
11
|
className, |
|
12
|
classNames, |
|
13
|
showOutsideDays = true, |
|
14
|
...props |
|
15
|
}: CalendarProps) { |
|
16
|
return ( |
|
17
|
<DayPicker |
|
18
|
showOutsideDays={showOutsideDays} |
|
19
|
className={cn("p-3", className)} |
|
20
|
classNames={{ |
|
21
|
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", |
|
22
|
month: "space-y-4", |
|
23
|
caption: "flex justify-center pt-1 relative items-center", |
|
24
|
caption_label: "text-sm font-medium", |
|
25
|
nav: "space-x-1 flex items-center", |
|
26
|
nav_button: cn( |
|
27
|
buttonVariants({ variant: "outline" }), |
|
28
|
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100" |
|
29
|
), |
|
30
|
nav_button_previous: "absolute left-1", |
|
31
|
nav_button_next: "absolute right-1", |
|
32
|
table: "w-full border-collapse space-y-1", |
|
33
|
head_row: "flex", |
|
34
|
head_cell: |
|
35
|
"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", |
|
36
|
row: "flex w-full mt-2", |
|
37
|
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", |
|
38
|
day: cn( |
|
39
|
buttonVariants({ variant: "ghost" }), |
|
40
|
"h-9 w-9 p-0 font-normal aria-selected:opacity-100" |
|
41
|
), |
|
42
|
day_range_end: "day-range-end", |
|
43
|
day_selected: |
|
44
|
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", |
|
45
|
day_today: "bg-accent text-accent-foreground", |
|
46
|
day_outside: |
|
47
|
"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", |
|
48
|
day_disabled: "text-muted-foreground opacity-50", |
|
49
|
day_range_middle: |
|
50
|
"aria-selected:bg-accent aria-selected:text-accent-foreground", |
|
51
|
day_hidden: "invisible", |
|
52
|
...classNames, |
|
53
|
}} |
|
54
|
components={{ |
|
55
|
IconLeft: ({ className, ...props }) => ( |
|
56
|
<ChevronLeft className={cn("h-4 w-4", className)} {...props} /> |
|
57
|
), |
|
58
|
IconRight: ({ className, ...props }) => ( |
|
59
|
<ChevronRight className={cn("h-4 w-4", className)} {...props} /> |
|
60
|
), |
|
61
|
}} |
|
62
|
{...props} |
|
63
|
/> |
|
64
|
) |
|
65
|
} |
|
66
|
Calendar.displayName = "Calendar" |
|
67
|
|
|
68
|
export { Calendar } |