calendar-demo.tsx — ui Source File

Source Code

"use client"

import * as React from "react"
import { addDays } from "date-fns"
import { Clock2Icon } from "lucide-react"
import { type DateRange } from "react-day-picker"
import { es } from "react-day-picker/locale"

import { Button } from "@/registry/new-york-v4/ui/button"
import { Calendar, CalendarDayButton } from "@/registry/new-york-v4/ui/calendar"
import { Card, CardContent, CardFooter } from "@/registry/new-york-v4/ui/card"
import { Input } from "@/registry/new-york-v4/ui/input"
import { Label } from "@/registry/new-york-v4/ui/label"

export function CalendarDemo() {
  return (
    <div className="bg-muted flex flex-1 flex-col flex-wrap justify-center gap-8 p-10 lg:flex-row">
      <CalendarSingle />
      <CalendarMultiple />
      <CalendarRange />
      <CalendarBookedDates />
      <CalendarRangeMultipleMonths />
      <CalendarWithTime />
      <CalendarWithPresets />
      <CalendarCustomDays />
    </div>
  )
}

function CalendarSingle() {
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(new Date().getFullYear(), new Date().getMonth(), 12)
  )
  return (
    <div className="flex flex-col gap-3">
      <div className="px-2 text-center text-sm">Single Selection</div>
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        className="rounded-lg border shadow-sm"
        captionLayout="dropdown"
      />
    </div>
  )
}

function CalendarMultiple() {
  return (
    <div className="flex flex-col gap-3">
      <div className="px-2 text-center text-sm">Multiple Selection</div>
      <Calendar mode="multiple" className="rounded-lg border shadow-sm" />
    </div>
  )
}

function CalendarRange() {
  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
    from: new Date(new Date().getFullYear(), 0, 12),
    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),
// ... (217 more lines)