Components

Calendar

A month grid for picking one date; in Turkish the week starts on Monday.

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

The week starts by the Provider language; day and month names come from Intl.

October 2026

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

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

Limits

Days outside min and max, and weekends marked by isDateUnavailable, cannot be chosen.

October 2026

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

const weekend = (date: { year: number; month: number; day: number }) => [0, 6].includes(new Date(Date.UTC(date.year, date.month - 1, date.day)).getUTCDay());

export default function Limits() {
  return (
    <Provider locale="en-GB">
      <Calendar defaultValue={parseDate('2026-10-15')} min={parseDate('2026-10-10')} max={parseDate('2026-11-25')} isDateUnavailable={weekend} />
    </Provider>
  );
}

Status dot

dayStatus puts a small dot under a day; its meaning is read with the day name.

October 2026

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

export default function Status() {
  return (
    <Provider locale="en-GB">
      <Calendar
        defaultValue={parseDate('2026-10-28')}
        dayStatus={(date) => (date.day % 7 === 3 ? { tone: 'info', label: 'Has an event' } : undefined)}
      />
    </Provider>
  );
}

Light and dark mode

The selected day takes the primary action colour.

October 2026

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

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

Mon	Tue	Wed	Thu	Fri	Sat	Sun

Mon	Tue	Wed	Thu	Fri	Sat	Sun

Mon	Tue	Wed	Thu	Fri	Sat	Sun

Mon	Tue	Wed	Thu	Fri	Sat	Sun

Mon	Tue	Wed	Thu	Fri	Sat	Sun