Calendar

An inline month grid for picking dates. Use it for date fields, scheduling panels, and booking flows where the calendar stays on screen. For a compact trigger that opens the grid in a popover, reach for DatePicker instead.

<Calendar mode="single" selected={selected} onSelect={setSelected} />

Usage

Calendar is built on react-day-picker, which cladd treats as an optional peer dependency and does not install for you — add it explicitly:

npm install react-day-picker

Calendar then ships from a subpath, not the main barrel:

import { Calendar } from '@cladd-ui/react/calendar';
 
function Example() {
  const [selected, setSelected] = useState();
 
  return <Calendar mode="single" selected={selected} onSelect={setSelected} />;
}

Examples

Sizes

The grid and its controls follow the sm → 2xl size scale. The default is md. Tune the navigation buttons separately with controlSize, which takes a Button size.

<Calendar
  size="md"
  mode="single"
  selected={selected}
  onSelect={setSelected}
/>

Colors

Use the color prop to tint the selected day and focus ring with any accent.

<Calendar
  color="purple"
  mode="single"
  selected={selected}
  onSelect={setSelected}
/>

Range

Set mode="range" to select a start and end date. Pair it with numberOfMonths to show several months at once — handy for picking spans that cross a month boundary. The selection is a DateRange ({ from, to }).

<Calendar
  mode="range"
  numberOfMonths={2}
  selected={range}
  onSelect={setRange}
/>

Multiple

Set mode="multiple" to collect any number of individual dates. The selection is a Date[].

<Calendar mode="multiple" selected={days} onSelect={setDays} />

Dropdown navigation

Set captionLayout="dropdown" to swap the month and year labels for select menus, so users can jump across the calendar without clicking through every month.

<Calendar
  mode="single"
  captionLayout="dropdown"
  selected={selected}
  onSelect={setSelected}
/>

Header and footer

Pass header and footer to render your own content above and below the grid. Here the footer echoes the current selection as a Chip and the header uses a SectionTitle.

<Calendar
  mode="single"
  color="brand"
  selected={selected}
  onSelect={setSelected}
  header={<SectionTitle>Pick a date</SectionTitle>}
  footer={
    selected ? (
      <Chip color="brand">
        {selected.toLocaleDateString(undefined, {
          month: 'short',
          day: 'numeric',
          year: 'numeric',
        })}
      </Chip>
    ) : (
      <span className="text-cladd-fg-softer">No date selected</span>
    )
  }
/>

Playground

{mode === 'range' ? (
  <Calendar
    size="md"
    color="brand"
    mode="range"
    numberOfMonths={2}
    selected={range}
    onSelect={setRange}
  />
) : mode === 'multiple' ? (
  <Calendar
    size="md"
    color="brand"
    mode="multiple"
    selected={days}
    onSelect={setDays}
  />
) : (
  <Calendar
    size="md"
    color="brand"
    mode="single"
    selected={single}
    onSelect={setSingle}
  />
)}

API Reference

Calendar is built on react-day-picker and forwards every DayPicker prop straight through, so the full day-picker API is available alongside the cladd props below. That includes mode ('single' | 'multiple' | 'range'), selected, onSelect, numberOfMonths, captionLayout ('label' | 'dropdown'), disabled, and startMonth / endMonth. size is a CalendarSize ('sm' | 'md' | 'lg' | 'xl' | '2xl').