CalendarRange() — ui Function Reference

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

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ CalendarRange() — ui Function Reference

Dependency Diagram

graph TD
  95af9a7f_4f75_b943_7a8c_99318ed152e2["CalendarRange()"]
  b8382c6d_5ee9_bc6c_2fb5_2a8a99555aee["calendar-range.tsx"]
  95af9a7f_4f75_b943_7a8c_99318ed152e2 -->|defined in| b8382c6d_5ee9_bc6c_2fb5_2a8a99555aee
  style 95af9a7f_4f75_b943_7a8c_99318ed152e2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/calendar-range.tsx lines 9–31

export 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 (
    <Card className="mx-auto w-fit p-0">
      <CardContent className="p-0">
        <Calendar
          mode="range"
          defaultMonth={dateRange?.from}
          selected={dateRange}
          onSelect={setDateRange}
          numberOfMonths={2}
          disabled={(date) =>
            date > new Date() || date < new Date("1900-01-01")
          }
        />
      </CardContent>
    </Card>
  )
}