calendar-11

1"use client"
2 
3import * as React from "react"
4import { type DateRange } from "react-day-picker"
5 
6import { Calendar } from "@/registry/default/ui/calendar"
7 
8export default function Calendar11() {
9  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
10    from: new Date(2025, 5, 17),
11    to: new Date(2025, 5, 20),
12  })
13 
14  return (
15    <div className="flex min-w-0 flex-col gap-2">
16      <Calendar
17        mode="range"
18        selected={dateRange}
19        onSelect={setDateRange}
20        numberOfMonths={2}
21        startMonth={new Date(2025, 5, 1)}
22        endMonth={new Date(2025, 6, 31)}
23        disableNavigation
24        className="rounded-lg border shadow-sm"
25      />
26      <div className="text-muted-foreground text-center text-xs">
27        We are open in June and July only.
28      </div>
29    </div>
30  )
31}