Calendar

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Calendar.tsx

Storybook

Calendar · Playground

Calendar, @bigbang/ui paketindedir.

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

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

CalendarDate, parseDate, today ve getLocalTimeZone, @internationalized/date paketinden yeniden dışa aktarılır.

Özellikler

value

Açıklama

Kontrol ettiğinizde seçili tarih ya da hiçbiri için null. onValueChange ile birlikte verin. Tarihler @internationalized/date CalendarDate türündedir, asla JS Date değil.

Tür

CalendarDate | null

defaultValue

Açıklama

Kontrol etmediğinizde ilk render'daki seçili tarih.

Tür

CalendarDate

onValueChange

Açıklama

Kullanıcı bir gün seçince seçilen tarihle çağrılır.

Tür

(value: CalendarDate) => void

min

Açıklama

Seçilebilen en erken tarih; önceki günler devre dışıdır ve gezinme o ayda durur.

Tür

CalendarDate

max

Açıklama

Seçilebilen en geç tarih; sonraki günler devre dışıdır ve gezinme o ayda durur.

Tür

CalendarDate

isDateUnavailable

Açıklama

Seçilemeyen günler için, ör. tatiller, true döndürün. Üstleri çizilir ve 'seçilemez' olarak okunur.

Tür

(date: CalendarDate) => boolean

dayStatus

Açıklama

Günün altında küçük bir durum noktası; anlamı günün adıyla okunur. Etiket yerelleştirilmiş uygulama metnidir.

Tür

(date: CalendarDate) => DayStatus

disabled

Açıklama

Bütün günleri ve ay düğmelerini devre dışı bırakır.

Tür

boolean

Varsayılan

false

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="calendar": kök öğe üzerinde.
• data-part: calendar, header, title, grid.
• Gün düğmesinde data-date (ISO), data-today, data-selected, data-in-range.