CalendarBookedDates() — ui Function Reference

Architecture documentation for the CalendarBookedDates() function in calendar-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ CalendarBookedDates() — ui Function Reference

Dependency Diagram

graph TD
  3f5e235f_caf1_2720_601f_c525342d278a["CalendarBookedDates()"]
  5fbf849d_fd5d_8f6c_88e7_5a64a8f219ab["calendar-demo.tsx"]
  3f5e235f_caf1_2720_601f_c525342d278a -->|defined in| 5fbf849d_fd5d_8f6c_88e7_5a64a8f219ab
  style 3f5e235f_caf1_2720_601f_c525342d278a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/calendar-demo.tsx lines 102–130

function CalendarBookedDates() {
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(new Date().getFullYear(), 1, 3)
  )
  const bookedDates = Array.from(
    { length: 15 },
    (_, i) => new Date(new Date().getFullYear(), new Date().getMonth(), 12 + i)
  )

  return (
    <div className="flex flex-col gap-3">
      <div className="px-2 text-center text-sm">With booked dates</div>
      <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"
      />
    </div>
  )
}