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/base-vega/components/example"
12import { Button } from "@/registry/base-vega/ui/button"
13import { Calendar, CalendarDayButton } from "@/registry/base-vega/ui/calendar"
14import { Card, CardContent, CardFooter } from "@/registry/base-vega/ui/card"
15import { Field, FieldGroup, FieldLabel } from "@/registry/base-vega/ui/field"
16import {
17  InputGroup,
18  InputGroupAddon,
19  InputGroupInput,
20} from "@/registry/base-vega/ui/input-group"
21import {
22  Popover,
23  PopoverContent,
24  PopoverTrigger,
25} from "@/registry/base-vega/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      <CalendarInCard />
44      <CalendarInPopover />
45    </ExampleWrapper>
46  )
47}
48 
49function CalendarInCard() {
50  return (
51    <Example title="In Card">
52      <Card className="mx-auto w-fit p-0">
53        <CardContent className="p-0">
54          <Calendar mode="single" />
55        </CardContent>
56      </Card>
57    </Example>
58  )
59}
60 
61function CalendarInPopover() {
62  return (
63    <Example title="In Popover">
64      <Popover>
65        <PopoverTrigger
66          render={<Button variant="outline" className="px-2.5 font-normal" />}
67        >
68          <IconPlaceholder
69            lucide="CalendarIcon"
70            tabler="IconCalendar"
71            hugeicons="CalendarIcon"
72            phosphor="CalendarBlankIcon"
73            remixicon="RiCalendarLine"
74            data-icon="inline-start"
75          />
76          Open Calendar
77        </PopoverTrigger>
78        <PopoverContent className="w-auto p-0" align="start">
79          <Calendar mode="single" />
80        </PopoverContent>
81      </Popover>
82    </Example>
83  )
84}
85 
86function CalendarSingle() {
87  const [date, setDate] = React.useState<Date | undefined>(
88    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
89  )
90  return (
91    <Example title="Single">
92// … truncated