CalendarRangeMultipleMonths() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ CalendarRangeMultipleMonths() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

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

function CalendarRangeMultipleMonths() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: new Date(new Date().getFullYear(), 3, 12),
    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),
  })

  return (
    <div className="flex flex-col gap-3">
      <div className="px-2 text-center text-sm">Range Selection + Locale</div>
      <Calendar
        mode="range"
        defaultMonth={range?.from}
        selected={range}
        onSelect={setRange}
        numberOfMonths={3}
        locale={es}
        fixedWeeks
        className="rounded-lg border shadow-sm"
      />
    </div>
  )
}