Calendar

Installation

The component is exported from @by/experience-system. Add the package with your package manager:

pnpm add @by/experience-system

In this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system.

Composition

Use a single Calendar component. It wraps react-day-picker DayPicker and supplies Experience System styling, Button-based month navigation, @by/icons chevrons, and CalendarDayButton for days. There are no separate layout exports—configure selection and layout through props (mode, selected, onSelect, numberOfMonths, classNames, components, …).

Calendar
└── (internal DayPicker: caption, nav, month grid, …)

Usage

import * as React from 'react';
import { Calendar } from '@by/experience-system';

Calendar is a client component ('use client'). Use it in client boundaries or inside other client components (for example next to a date field or inside a popover).

export function DatePickerExample() {
  const [date, setDate] = React.useState<Date | undefined>();

  return <Calendar mode="single" selected={date} onSelect={setDate} />;
}

Examples

The live preview at the top of this page uses calendar-usage (single selection with local state).

Multiple selection

Use mode="multiple" with Date[] state for non-contiguous days.

Range selection

Use mode="range" with DateRange state: optional start date in from, end date in to, for an inclusive span.

API Reference

Subsection titles name the export from @by/experience-system. Calendar forwards to react-day-picker; for the full prop surface see the DayPicker API.

Calendar

Styled DayPicker. Design-system additions and defaults below; all other DayPicker props are supported.

Accessibility

• Keyboard navigation and grid semantics come from react-day-picker; add aria-label / visible labels on surrounding controls when the calendar is embedded without a visible field.
• Navigation uses Button with icon-only affordances; ensure the surrounding form or dialog exposes a clear purpose for screen reader users.

Source in the repo: packages/experience-system/src/components/Calendar/Calendar.tsx and CalendarDayButton.tsx.