Calendar

Gün ya da aralık seçmek için bir ay grid'i. Ay, gün ve hafta günü adları verdiğin locale için Intl'den gelir; hafta da o locale'in ilk gününden başlar. tr-TR için hafta pazartesi başlar.

KararlıKaynak kod

Pzt	Sal	Çar	Per	Cum	Cmt	Paz

Tarih seçilmedi

const [date, setDate] = useState<Date | null>(null);

<Calendar
locale="tr-TR"
previousMonthLabel="Önceki ay"
nextMonthLabel="Sonraki ay"
value={date}
onValueChange={setDate}
/>

Import

import { Calendar, type DateRange } from "@meridui/react";

Örnekler

Aralık

mode="range": ilk seçim start'ı, ikinci seçim end'i belirler (ikinci gün daha erkense yer değiştirirler). Hover aralığı önizler.

Pzt	Sal	Çar	Per	Cum	Cmt	Paz

… – …

const [range, setRange] = useState<DateRange>({ start: null, end: null });

<Calendar locale="tr-TR" mode="range" value={range} onValueChange={setRange} />

En erken, en geç ve devre dışı günler

min/max dışındaki ya da isDateDisabled'ın eşleştirdiği günler aria-disabled alır ve seçilemez; ama grid doğal okunsun diye klavyeyle erişilebilir kalır.

Pzt	Sal	Çar	Per	Cum	Cmt	Paz

const isWeekend = (d: Date) => d.getDay() === 0 || d.getDay() === 6;

<Calendar locale="tr-TR" min={today} max={inTwoMonths} isDateDisabled={isWeekend} />

Locale ve yön

locale grid'in gösterdiği ya da okuttuğu her adı yerelleştirir. weekStartsOn ilk kolonu ezer (0 = pazar). dir="rtl" altında grid ve ok tuşları okuma yönünü izler.

السبت	الأحد	الاثنين	الثلاثاء	الأربعاء	الخميس	الجمعة

<Calendar locale="en-US" />
<Calendar locale="ar-EG" dir="rtl" />

API referansı

Bir div render'lar; diğer div attribute'ları ve ref ona gider. Tarihler yerel saatte takvim gününe göre karşılaştırılır.

Prop	Tip	Varsayılan	Açıklama
`mode`	`"single" \| "range"`	`"single"`	Tek gün ya da başlangıç ve bitiş günü seçtirir.
`value`	`Date \| null \| DateRange`	–	Controlled seçim: Date (tekli) ya da { start, end } (aralık).
`defaultValue`	`Date \| null \| DateRange`	–	Uncontrolled kullanımda başlangıç seçimi.
`onValueChange`	`(value) => void`	–	Her seçimden sonra çağrılır. Aralıkta önce { start, end: null }, sonra iki gün.
`month / defaultMonth / onMonthChange`	`Date / Date / (month: Date) => void`	–	Gösterilen ay, controlled ya da başlangıç. Varsayılanı seçili gün ya da bugün.
`min`	`Date`	–	Seçilebilen en erken gün.
`max`	`Date`	–	Seçilebilen en geç gün.
`isDateDisabled`	`(date: Date) => boolean`	–	Tek tek günleri kullanılamaz işaretler.
`locale`	`string`	`"en-US"`	Adlar ve haftanın ilk günü için BCP 47 locale'i. Türkçe arayüzde "tr-TR".
`weekStartsOn`	`0 – 6`	–	İlk kolon (0 = pazar). Varsayılanı locale'in hafta başı: tr-TR → pazartesi, en-US → pazar.
`previousMonthLabel`	`string`	`"Previous month"`	Önceki ay butonunun erişilebilir adı. Türkçe arayüzde "Önceki ay".
`nextMonthLabel`	`string`	`"Next month"`	Sonraki ay butonunun erişilebilir adı. Türkçe arayüzde "Sonraki ay".
`autoFocus`	`boolean`	`false`	Mount'ta seçili güne (ya da bugüne) focus verir.

Stil verme

Sınıf	Eleman
`.mrd-calendar`	Kök (`data-mode`)
`.mrd-calendar__header`, `.mrd-calendar__caption`, `.mrd-calendar__nav`	Ay başlığı satırı ve butonları
`.mrd-calendar__grid`, `.mrd-calendar__weekday`	`role="grid"` tablo ve kolon başlıkları
`.mrd-calendar__cell`	Grid hücresi (`aria-selected`, `data-in-range`, `data-range-start`, `data-range-end`)
`.mrd-calendar__day`	Gün butonu (`data-selected`, `data-today`, `data-outside`, `data-disabled`)

Hücre boyutu --mrd-calendar-cell (36px; dokunmatik ekranlarda 44px).

WAI-ARIA Date Picker Dialog örneğindeki tarih grid'ine uyar. Grid ay başlığıyla etiketlenir; başlık polite bir live region'dır, yani ay değişimi okunur. Her gün butonunun adı locale'deki tam tarihtir (“30 Eylül 2026 Çarşamba”); bugün aria-current="date" taşır. Grid tek bir tab durağıdır.

Tuş	Ne yapar
`ArrowLeftArrowRight`	Önceki / sonraki gün (RTL'de ters). Ay sınırını geçer.
`ArrowUpArrowDown`	Önceki / sonraki haftanın aynı günü.
`HomeEnd`	Haftanın ilk / son günü.
`PageUpPageDown`	Önceki / sonraki ayın aynı günü.
`ShiftPageUp`	Önceki yılın aynı günü (PageDown: sonraki yıl).
`Enter`	Focus'taki günü seçer (Space de çalışır).

İlgili sayfalar

DatePicker — bu takvimi popover içinde açan tarih alanı.

Sun	Mon	Tue	Wed	Thu	Fri	Sat