Calendar

A date picker calendar component with single, range, and multiple selection modes.

Installation

pnpm add @wandercom/design-system-web

Usage

import { Calendar } from '@wandercom/design-system-web/ui/calendar';
import { useState } from 'react';

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

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

Examples

Loading example...

Selection modes

Single

Select a single date. The selected date appears with filled styling.

const [date, setDate] = useState<Date | undefined>();

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

Range

Select a date range with start and end dates. Range endpoints have filled styling while middle dates have a background highlight.

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

const [range, setRange] = useState<DateRange | undefined>();

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

Multiple

Select multiple individual dates. Each selected date appears with filled styling.

const [dates, setDates] = useState<Date[] | undefined>();

<Calendar
  mode="multiple"
  selected={dates}
  onSelect={setDates}
/>

Caption layouts

Label (default)

Displays the month and year as a static label.

<Calendar captionLayout="label" />

Dropdown

Displays month and year as dropdown selects for quick navigation. Requires fromYear and toYear props to define the selectable range.

<Calendar
  captionLayout="dropdown"
  fromYear={2000}
  toYear={2030}
/>

Multiple months

Display multiple months side by side using numberOfMonths.

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

Constraints

Date range limits

Restrict selectable dates with fromDate and toDate.

<Calendar
  mode="single"
  fromDate={new Date()}
  toDate={new Date(2027, 11, 31)}
/>

Disabled dates

Disable specific dates using disabled prop with a matcher function or array.

<Calendar
  mode="single"
  disabled={(date) => date.getDay() === 0 || date.getDay() === 6}
/>

Customization

Button variant

Customize the navigation button variant.

<Calendar buttonVariant="outline" />

Button size

Customize the navigation button size.

<Calendar buttonSize="icon-sm" />

Show outside days

Show days from adjacent months.

<Calendar showOutsideDays />

Custom components

Override internal components for advanced customization.

import { CalendarDayButton } from '@wandercom/design-system-web/ui/calendar';

<Calendar
  components={{
    DayButton: (props) => (
      <CalendarDayButton {...props} className="custom-day" />
    ),
  }}
/>

Props

mode?

'single' | 'range' | 'multiple'
The selection mode for the calendar.

selected?

Date | DateRange | Date[]
The currently selected date(s). Type depends on mode.

onSelect?

(value) => void
Callback when selection changes. Signature depends on mode.

captionLayout?

'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years'
Layout of the month/year caption. Defaults to 'label'.

numberOfMonths?

number
Number of months to display. Defaults to 1.

showOutsideDays?

boolean
Whether to show days from adjacent months. Defaults to false.

fromDate?

Date
The earliest selectable date.

toDate?

Date
The latest selectable date.

fromYear?

number
The earliest year shown in dropdown navigation.

toYear?

number
The latest year shown in dropdown navigation.

disabled?

Matcher | Matcher[]
Dates to disable. Can be a date, range, function, or array.

buttonVariant?

ComponentProps<typeof Button>['variant']
Button variant for navigation arrows. Defaults to 'ghost'.

buttonSize?

ComponentProps<typeof Button>['size']
Button size for navigation arrows. Defaults to 'icon-md'.

classNames?

object
Custom class names for internal DayPicker elements.

components?

object
Custom components to override default DayPicker components (Root, Chevron, DayButton, WeekNumber).

formatters?

object
Custom formatters for date display. Month dropdown defaults to short month names.

className?

string
Additional CSS classes to apply to the root element.

Accessibility

The Calendar component is built on react-day-picker which follows WAI-ARIA date picker patterns.

Keyboard interaction:

  • Arrow Left/Right - Navigate between days
  • Arrow Up/Down - Navigate between weeks
  • Page Up/Down - Navigate between months
  • Shift + Page Up/Down - Navigate between years
  • Home - Go to start of week
  • End - Go to end of week
  • Enter/Space - Select focused date
  • Escape - Close if in a popover context

Today's date is indicated with a green dot for easy reference.

Calendar