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
  e07f1070_a051_c18c_f915_94fde29f67f8["CalendarRange()"]
  77c2dc4a_470b_5777_bb13_194de3bba1ac["calendar-range.tsx"]
  e07f1070_a051_c18c_f915_94fde29f67f8 -->|defined in| 77c2dc4a_470b_5777_bb13_194de3bba1ac
  style e07f1070_a051_c18c_f915_94fde29f67f8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/calendar-range.tsx lines 9–25

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 (
    <Calendar
      mode="range"
      defaultMonth={dateRange?.from}
      selected={dateRange}
      onSelect={setDateRange}
      numberOfMonths={2}
      className="rounded-lg border"
    />
  )
}