Calendar14() — ui Function Reference

Architecture documentation for the Calendar14() function in calendar-14.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ Calendar14() — ui Function Reference

Dependency Diagram

graph TD
  1de2f958_9641_e2d6_4e58_a773a4c76f5b["Calendar14()"]
  600a490d_59eb_5708_1b61_3c56697c30e1["calendar-14.tsx"]
  1de2f958_9641_e2d6_4e58_a773a4c76f5b -->|defined in| 600a490d_59eb_5708_1b61_3c56697c30e1
  style 1de2f958_9641_e2d6_4e58_a773a4c76f5b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/registry/default/blocks/calendar-14.tsx lines 7–32

export default function Calendar14() {
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(2025, 5, 12)
  )
  const bookedDates = Array.from(
    { length: 12 },
    (_, i) => new Date(2025, 5, 15 + i)
  )

  return (
    <Calendar
      mode="single"
      defaultMonth={date}
      selected={date}
      onSelect={setDate}
      disabled={bookedDates}
      modifiers={{
        booked: bookedDates,
      }}
      modifiersClassNames={{
        booked: "[&>button]:line-through opacity-100",
      }}
      className="rounded-lg border shadow-sm"
    />
  )
}