Calendar

Stable

A keyboard-accessible month grid for choosing a date or a date range.

Calendar is the always-visible date grid used inside DatePicker and DateRangePicker. Use it directly when a date choice is the main task of the view, such as scheduling a signature roll-out. Dates outside min/max or rejected by isDateDisabled cannot be selected. Month and weekday names come from Intl, so it follows the chosen locale with no date library.

Source Edit docs Report an issue

Overview

tsx

import { useState } from 'react';
import { Calendar } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Basic() {
  const [date, setDate] = useState<Date | null>(new Date(2026, 10, 18));
  return <Calendar today={TODAY} locale="en-GB" value={date} onValueChange={setDate} />;
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Light

Dark

High contrast

Import

tsx

import { Calendar } from '@bindshq/stance-react';

Platforms

Calendar has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { Calendar } from '@bindshq/stance-react';

Examples

Range, two months

Click a start and end date; hovering previews the range.

tsx

import { useState } from 'react';
import { Calendar } from '@bindshq/stance-react';
import type { DateRange } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Range() {
  const [range, setRange] = useState<DateRange>({
    start: new Date(2026, 10, 16),
    end: new Date(2026, 10, 27),
  });
  return (
    <Calendar
      mode="range"
      numberOfMonths={2}
      today={TODAY}
      locale="en-GB"
      value={range}
      onValueChange={setRange}
    />
  );
}

Min, max and disabled dates

Only weekdays in the next three weeks are available.

tsx

import { Calendar } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Constraints() {
  return (
    <Calendar
      today={TODAY}
      locale="en-GB"
      min={TODAY}
      max={new Date(2026, 11, 2)}
      isDateDisabled={(d) => d.getDay() === 0 || d.getDay() === 6}
    />
  );
}

Locale and week start

US English with weeks starting on Sunday.

tsx

import { Calendar } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Localised() {
  return (
    <Calendar today={TODAY} locale="en-US" weekStartsOn={0} defaultValue={new Date(2026, 10, 26)} />
  );
}

API reference

Prop	Type	Default	Description
`mode`	`'single' \| 'range'`	`'single'`	Select one date or a range.
`value`	`Date \| null \| { start, end }`	None	Controlled value (shape depends on mode).
`defaultValue`	`Date \| null \| { start, end }`	None	Initial value when uncontrolled.
`onValueChange`	`(value) => void`	None	Called with the new date or range.
`month / defaultMonth / onMonthChange`	`Date / Date / (month: Date) => void`	None	The first displayed month.
`min`	`Date \| null`	None	Earliest selectable date.
`max`	`Date \| null`	None	Latest selectable date.
`isDateDisabled`	`(date: Date) => boolean`	None	Marks individual dates unavailable.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	0 = Sunday, 1 = Monday.
`locale`	`string`	None	BCP 47 locale for names and labels.
`captionLayout`	`'dropdown' \| 'label'`	`'dropdown' for one month`	Dropdown shows month and year menus so people can jump to a distant date. Label shows a plain title.
`fromYear / toYear`	`number`	None	First and last year in the year menu. Default to the min and max years, or 100 years back and 10 ahead.
`numberOfMonths`	`1 \| 2`	`1`	Months shown side by side.
`showOutsideDays`	`boolean`	`true`	Show adjacent-month days (single month only).
`today`	`Date`	None	Override today, e.g. for a time zone or tests.
`autoFocus`	`boolean`	`false`	Focus the active day on mount.
`labels`	`Partial<CalendarLabels>`	None	Translatable strings for navigation and day states.

Accessibility

Month and year menus are native selects with accessible names, so they work with every keyboard, screen reader and touch device.
Each month is a grid labelled by its month and year; weekday headers carry full names via abbr.
Each day is a button with a full spoken label, e.g. “Wednesday, 11 November 2026, Today, Selected”; today has aria-current="date".
Unavailable days stay discoverable but are announced as unavailable and cannot be chosen.
The month title is a polite live region, so changing months by keyboard is announced.
One day is in the Tab order; arrow keys, Page Up/Down and Home/End follow the APG date grid model.

Keyboard

Keys	Action
`←` `→`	Previous / next day.
`↑` `↓`	Same day previous / next week.
`Home` `End`	First / last day of the week.
`Page Up` `Page Down`	Same day previous / next month.
`Shift + Page Up` `Shift + Page Down`	Same day previous / next year.
`Enter` `Space`	Select the focused day (start, then end in range mode).

Usage guidelines

Do

Set min and max whenever dates outside a window are invalid.
Use the user’s locale.

Don’t

Use a calendar for dates far in the past, like birth dates; let people type instead (DatePicker).

Components Forms

Calendar

Stable

A keyboard-accessible month grid for choosing a date or a date range.

Source Edit docs Report an issue

Overview

tsx

import { useState } from 'react';
import { Calendar } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Basic() {
  const [date, setDate] = useState<Date | null>(new Date(2026, 10, 18));
  return <Calendar today={TODAY} locale="en-GB" value={date} onValueChange={setDate} />;
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Light

Dark

High contrast

Import

tsx

import { Calendar } from '@bindshq/stance-react';

Platforms

Calendar has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { Calendar } from '@bindshq/stance-react';

Examples

Range, two months

Click a start and end date; hovering previews the range.

tsx

import { useState } from 'react';
import { Calendar } from '@bindshq/stance-react';
import type { DateRange } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Range() {
  const [range, setRange] = useState<DateRange>({
    start: new Date(2026, 10, 16),
    end: new Date(2026, 10, 27),
  });
  return (
    <Calendar
      mode="range"
      numberOfMonths={2}
      today={TODAY}
      locale="en-GB"
      value={range}
      onValueChange={setRange}
    />
  );
}

Min, max and disabled dates

Only weekdays in the next three weeks are available.

tsx

import { Calendar } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Constraints() {
  return (
    <Calendar
      today={TODAY}
      locale="en-GB"
      min={TODAY}
      max={new Date(2026, 11, 2)}
      isDateDisabled={(d) => d.getDay() === 0 || d.getDay() === 6}
    />
  );
}

Locale and week start

US English with weeks starting on Sunday.

tsx

import { Calendar } from '@bindshq/stance-react';

const TODAY = new Date(2026, 10, 11);

export function Localised() {
  return (
    <Calendar today={TODAY} locale="en-US" weekStartsOn={0} defaultValue={new Date(2026, 10, 26)} />
  );
}

API reference

Prop	Type	Default	Description
`mode`	`'single' \| 'range'`	`'single'`	Select one date or a range.
`value`	`Date \| null \| { start, end }`	None	Controlled value (shape depends on mode).
`defaultValue`	`Date \| null \| { start, end }`	None	Initial value when uncontrolled.
`onValueChange`	`(value) => void`	None	Called with the new date or range.
`month / defaultMonth / onMonthChange`	`Date / Date / (month: Date) => void`	None	The first displayed month.
`min`	`Date \| null`	None	Earliest selectable date.
`max`	`Date \| null`	None	Latest selectable date.
`isDateDisabled`	`(date: Date) => boolean`	None	Marks individual dates unavailable.
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	0 = Sunday, 1 = Monday.
`locale`	`string`	None	BCP 47 locale for names and labels.
`captionLayout`	`'dropdown' \| 'label'`	`'dropdown' for one month`	Dropdown shows month and year menus so people can jump to a distant date. Label shows a plain title.
`fromYear / toYear`	`number`	None	First and last year in the year menu. Default to the min and max years, or 100 years back and 10 ahead.
`numberOfMonths`	`1 \| 2`	`1`	Months shown side by side.
`showOutsideDays`	`boolean`	`true`	Show adjacent-month days (single month only).
`today`	`Date`	None	Override today, e.g. for a time zone or tests.
`autoFocus`	`boolean`	`false`	Focus the active day on mount.
`labels`	`Partial<CalendarLabels>`	None	Translatable strings for navigation and day states.

Accessibility

Month and year menus are native selects with accessible names, so they work with every keyboard, screen reader and touch device.
Each month is a grid labelled by its month and year; weekday headers carry full names via abbr.
Each day is a button with a full spoken label, e.g. “Wednesday, 11 November 2026, Today, Selected”; today has aria-current="date".
Unavailable days stay discoverable but are announced as unavailable and cannot be chosen.
The month title is a polite live region, so changing months by keyboard is announced.
One day is in the Tab order; arrow keys, Page Up/Down and Home/End follow the APG date grid model.

Keyboard

Keys	Action
`←` `→`	Previous / next day.
`↑` `↓`	Same day previous / next week.
`Home` `End`	First / last day of the week.
`Page Up` `Page Down`	Same day previous / next month.
`Shift + Page Up` `Shift + Page Down`	Same day previous / next year.
`Enter` `Space`	Select the focused day (start, then end in range mode).

Usage guidelines

Do

Set min and max whenever dates outside a window are invalid.
Use the user’s locale.

Don’t

Use a calendar for dates far in the past, like birth dates; let people type instead (DatePicker).

Calendar

Overview

Light, dark and high contrast

Import

Platforms

Examples

Range, two months

November 2026

December 2026

Min, max and disabled dates

Locale and week start

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Calendar

Overview

Light, dark and high contrast

Import

Platforms

Examples

Range, two months

November 2026

December 2026

Min, max and disabled dates

Locale and week start

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Overview

November 2026

Light, dark and high contrast

November 2026

November 2026

November 2026

Import

Platforms

Examples

Range, two months

November 2026

December 2026

Min, max and disabled dates

November 2026

Locale and week start

November 2026

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related

Overview

November 2026

Light, dark and high contrast

November 2026

November 2026

November 2026

Import

Platforms

Examples

Range, two months

November 2026

December 2026

Min, max and disabled dates

November 2026

Locale and week start

November 2026

API reference

Accessibility

Keyboard

Usage guidelines

Do

Don’t

Related