Bileşenler

Calendar

Tek bir tarih seçmek için ay ızgarası; Türkçede hafta pazartesi başlar.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Hafta Provider diline göre başlar; gün ve ay adları Intl ile yazılır.

Ekim 2026

Pzt	Sal	Çar	Per	Cum	Cmt	Paz

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

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

Sınırlar

min ve max dışındaki günler ve isDateUnavailable ile işaretlenen hafta sonları seçilemez.

Ekim 2026

Pzt	Sal	Çar	Per	Cum	Cmt	Paz

import { Calendar, 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 <Calendar defaultValue={parseDate('2026-10-15')} min={parseDate('2026-10-10')} max={parseDate('2026-11-25')} isDateUnavailable={weekend} />;
}

Durum noktası

dayStatus günün altına küçük bir nokta koyar; anlamı günün adıyla okunur.

Ekim 2026

Pzt	Sal	Çar	Per	Cum	Cmt	Paz

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

export default function Status() {
  return (
    <Calendar
      defaultValue={parseDate('2026-10-28')}
      dayStatus={(date) => (date.day % 7 === 3 ? { tone: 'info', label: 'Etkinlik var' } : undefined)}
    />
  );
}

Açık ve koyu mod

Seçili gün birincil işlem rengini alır.

Ekim 2026

Pzt	Sal	Çar	Per	Cum	Cmt	Paz

Ekim 2026

Pzt	Sal	Çar	Per	Cum	Cmt	Paz

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

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