Component

Calendar

Full month calendar grid with date selection. Supports single date and range selection modes.

Usage

Use the calendar component for date pickers and scheduling interfaces. Prefer the popover pattern for inline forms.

Playground

Preview
SuMoTuWeThFrSa

Configure

Single date or date range selection

Code

const [selected, setSelected] = React.useState<Date | undefined>()

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

Do

  • Pre-select today's date when a current date is a sensible default
  • Highlight the selected range clearly in range mode

Don't

  • Don't use a full calendar for simple date-of-birth entry, use text inputs instead
  • Don't allow selection of disabled or unavailable dates without visual feedback