CalendarRange() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ CalendarRange() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

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),
  })

  return (
    <div className="flex flex-col gap-3">
      <div className="px-2 text-center text-sm">Range Selection</div>
      <Calendar
        mode="range"
        defaultMonth={dateRange?.from}
        selected={dateRange}
        onSelect={setDateRange}
        numberOfMonths={2}
        disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
        className="rounded-lg border shadow-sm"
      />
    </div>
  )
}