Calendar

Usage

import { Calendar } from '@acronis-platform/ui-react';

Calendar is a pure day-grid built on react-day-picker's DayPicker. It supports single, multiple, and range selection (mode) and one or more months side by side (numberOfMonths), with prev/next chevrons at the outer edges of the month row. Keyboard navigation, focus management, and the selection model are handled by react-day-picker.

Two defaults are set by this wrapper rather than inherited from DayPicker: the week starts on Monday (weekStartsOn={1}) and outside days are shown (showOutsideDays). Both are overridable per instance. Under dir="rtl" the grid mirrors and the prev/next chevrons flip with it.

This is a design-pending v1 ported from the legacy library: no --ui-calendar-* token tier exists yet, so it themes off the shared semantic vocabulary (bg-background / text-foreground for the surface, the brand-primary tokens for selected days and range endpoints, bg-accent for the range middle). It will be reconciled against the Figma design once a mockup lands.

Examples

A single-date calendar:

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

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

A dual-month range calendar:

import type { DateRange } from 'react-day-picker';

const [range, setRange] = React.useState<DateRange>();

<Calendar mode="range" numberOfMonths={2} selected={range} onSelect={setRange} />

Disable specific days or weekends with a matcher:

<Calendar
  mode="single"
  disabled={[new Date(2026, 6, 4), { dayOfWeek: [0, 6] }]}
/>

Swap the boxed month/year caption for jump-to dropdowns with captionLayout (label — the default — or dropdown / dropdown-months / dropdown-years):

<Calendar mode="single" captionLayout="dropdown" />

To pair the grid with a text-field trigger and a popover, compose it yourself with InputDatePicker and a Popover — see DateRangePicker (which composes CalendarPanel rather than this component) for a ready-made range field.

API Reference

Calendar forwards every react-day-picker DayPicker prop; the table below covers the props most commonly set.