Skip to content
← Inventory

Calendar

Date picker built on react-day-picker, styled with the shared button variants; supports single, multiple, and range selection via the mode prop. Accepts all DayPicker props. showOutsideDays defaults to true.

July 2026

Usage

import { Calendar, CalendarProps } from "@desk/ui/components/calendar";

Best practices

  • Set mode explicitly (single | multiple | range) — the selection value shape and onSelect signature change with it; a range handler never fires in single mode.

  • Restrict selectable dates with react-day-picker matchers (disabled/hidden/startMonth/endMonth), not by filtering after the user clicks.

  • Use Calendar for an inline date grid; for a compact click-to-open date field, wrap it in a Popover behind a Button/Input trigger.

Props

Also exports

  • componentCalendar
  • typeCalendarProps

Composition

Builds on

Button