Calendar

When to use

Calendar is for picking one date in a month view that stays open on the page: a planning panel, a side column.

When not to use

• For a date in a form field: use DatePicker; it also offers typed entry.
• For a date range: use DateRangePicker.

Anatomy

October 2026

Mon	Tue	Wed	Thu	Fri	Sat	Sun
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

LightDark

Copy code

import { Calendar, Provider, parseDate } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <Calendar defaultValue={parseDate('2026-10-28')} />
    </Provider>
  );
}

1. Header: Month and year, with previous and next month buttons on either side.
2. Weekdays: Short names; the full name is read through abbr.
3. Day grid: 40 px round days; only days of this month are shown.
4. Today: A thin inner ring and bold digits.

Behaviour

• Focus sits on one day; move with the arrows, Page Up/Down and Home/End, and the month changes when needed.
• Month buttons beyond min and max are disabled.
• When the visible month changes, the header is announced politely.
• The value is an @internationalized/date CalendarDate; there is no time zone or JS Date drift.

Guidelines

• State limits both with min/max and in text.
• Explain status dots on the page too; colour alone carries no meaning.
• For far dates such as birth dates, favour DatePicker’s typed entry over the calendar.

Content

Turkish	English
Önceki ay	Previous month
Sonraki ay	Next month
bugün	today
seçilemez	unavailable

Related components

• DatePicker: A field with a calendar popup.
• DateRangePicker: A date range.