Calendar

1"use client"
2 
3import * as React from "react"
4import { addDays, format } from "date-fns"
5import { type DateRange } from "react-day-picker"
6import { es } from "react-day-picker/locale"
7 
8import {
9  Example,
10  ExampleWrapper,
11} from "@/registry/bases/radix/components/example"
12import { Button } from "@/registry/bases/radix/ui/button"
13import { Calendar, CalendarDayButton } from "@/registry/bases/radix/ui/calendar"
14import { Card, CardContent, CardFooter } from "@/registry/bases/radix/ui/card"
15import { Field, FieldGroup, FieldLabel } from "@/registry/bases/radix/ui/field"
16import {
17  InputGroup,
18  InputGroupAddon,
19  InputGroupInput,
20} from "@/registry/bases/radix/ui/input-group"
21import {
22  Popover,
23  PopoverContent,
24  PopoverTrigger,
25} from "@/registry/bases/radix/ui/popover"
26import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
27 
28export default function CalendarExample() {
29  return (
30    <ExampleWrapper>
31      <CalendarSingle />
32      <CalendarMultiple />
33      <CalendarWeekNumbers />
34      <CalendarBookedDates />
35      <CalendarRange />
36      <CalendarRangeMultipleMonths />
37      <CalendarWithTime />
38      <CalendarWithPresets />
39      <CalendarCustomDays />
40      <DatePickerSimple />
41      <DataPickerWithDropdowns />
42      <DatePickerWithRange />
43    </ExampleWrapper>
44  )
45}
46 
47function CalendarSingle() {
48  const [date, setDate] = React.useState<Date | undefined>(
49    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
50  )
51  return (
52    <Example title="Single">
53      <Card className="mx-auto w-fit p-0">
54        <CardContent className="p-0">
55          <Calendar
56            mode="single"
57            selected={date}
58            onSelect={setDate}
59            captionLayout="dropdown"
60          />
61        </CardContent>
62      </Card>
63    </Example>
64  )
65}
66 
67function CalendarMultiple() {
68  return (
69    <Example title="Multiple">
70      <Card className="mx-auto w-fit p-0">
71        <CardContent className="p-0">
72          <Calendar mode="multiple" />
73        </CardContent>
74      </Card>
75    </Example>
76  )
77}
78 
79function CalendarRange() {
80  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
81    from: new Date(new Date().getFullYear(), 0, 12),
82    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),
83  })
84 
85  return (
86    <Example
87      title="Range"
88      containerClassName="lg:col-span-full 2xl:col-span-full"
89      className="p-12"
90    >
91      <Card className="mx-auto w-fit p-0">
92        <CardContent className="p-0">
93// … truncated