Calendar

v1.1.2

Ready for Production

Catalyst Calendar extends React DayPicker with built-in design tokens and accessibility defaults — so you get a production-ready calendar and date-picker. Also supports integration with DatePicker and DateField components.

Installation

npm install @pmi/catalyst-calendar

import { Calendar } from '@pmi/catalyst-calendar';

Common Patterns

Single Date Selection (using custom chevron icons)

Multiple Date Selection

Date Range Selection

Dropdown Caption Layout

DatePicker Integration - Single

DatePicker Integration - Range

DateField Integration - Date Input with Integrated Calendar Field

API Reference

Calendar

Accepts all DayPickerProps props from React DayPicker. The prop classNames comes from React DayPicker ClassNames and additionally includes an optional dot class for styling the date indicator dot.

DatePicker

Accepts all standard React button attributes (onClick, type, aria-*, etc.). Forwards ref to the underlying HTMLButtonElement.

DateField

Extends all standard HTML div element props. Forwards ref to the underlying element.

DateFieldClassNames

DateFieldSlot

Extends all standard HTML div element props. Forwards ref to the underlying HTMLDivElement.

Accessibility

Keyboard Interactions

ARIA

• Use aria-label prop to provide context (e.g., "Select date")
• Uses proper ARIA attributes for date selection states for screen reader support

See the React DayPicker docs for inherited behavior.

Choosing the Right Component

Use Calendar when you need a flexible date selection interface. Reach for a different primitive when:

Related

• DateField – available as Catalyst packages @pmi/catalyst-date-field and @pmi/catalyst-date-field
• Popover – Popover container for DatePicker