Calendar

Installation

Package

@bigbang/ui

Import

import { Calendar } from '@bigbang/ui';

Source

Calendar.tsx

Storybook

Calendar · Playground

Calendar is in the @bigbang/ui package.

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

<Calendar value={date} onValueChange={setDate} min={parseDate('2026-01-01')} />;

CalendarDate, parseDate, today and getLocalTimeZone are re-exported from @internationalized/date.

Props

value

Description

Selected date when you control it, or null for none. Pass it with onValueChange. Dates are CalendarDate from @internationalized/date, never JS Date.

Type

CalendarDate | null

defaultValue

Description

Selected date on first render when you do not control it.

Type

CalendarDate

onValueChange

Description

Called with the chosen date when the user picks a day.

Type

(value: CalendarDate) => void

min

Description

Earliest date that can be chosen; earlier days are disabled and navigation stops at its month.

Type

CalendarDate

max

Description

Latest date that can be chosen; later days are disabled and navigation stops at its month.

Type

CalendarDate

isDateUnavailable

Description

Return true for days that cannot be chosen, such as holidays. They are crossed out and read as unavailable.

Type

(date: CalendarDate) => boolean

dayStatus

Description

A small status dot under a day, with its meaning read in the day's name. The label is localised app copy.

Type

(date: CalendarDate) => DayStatus

disabled

Description

Disables every day and the month buttons.

Type

boolean

Default

false

className

Description

Added to the root element; use it for layout only.

Type

string

Data attributes

• data-component="calendar": on the root element.
• data-part: calendar, header, title, grid.
• On a day button: data-date (ISO), data-today, data-selected, data-in-range.