Components / Calendar

Calendar

Picking dates from a month grid (react-day-picker): a single day, multiple days, or a range. Usually rendered inside a Popover; for date plus time use DateTimePicker.

import { Calendar, CalendarDayButton } from '@layers/ui/calendar'

Rendered stock

House rules

  • Controlled selection: mode="single" with selected and onSelect; range and multiple modes follow the same shape.
  • Nav and day buttons are real Buttons; theme them via the buttonVariant prop (default ghost), never by restyling day cells.
  • Cell geometry comes from the --cell-size and --cell-radius variables set on the root; override those, not individual classes.

See also