---
title: "Calendar"
description: "Gün, aralık ya da birden fazla gün seçtiren ay tablosu. Türkçe ve pazartesiyle başlar."
---

<Callout type="info" title="Ne zaman kullanılır">
Takvimin ekranda hep açık durduğu yerler: teslimat günü seçimi, rezervasyon, kampanya takvimi. Form alanında tarih için [Date Picker](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/date-picker), aralık için [Date Range Picker](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/date-range-picker) kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/calendar
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

[react-day-picker](https://daypicker.dev) üzerine kuruludur. mode, selected, onSelect, disabled, numberOfMonths gibi tüm react-day-picker prop'ları çalışır.

## Örnekler

### Tek tarih

mode="single". Seçili gün dolu, bugün altı noktalı görünür.

**Örnek: Tek tarih** (`calendar/single`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/calendar/single)

```tsx
import * as React from "react"

import { Calendar } from "@/components/ui/calendar"

export default function CalendarSingle() {
  const [date, setDate] = React.useState<Date | undefined>(new Date(2026, 9, 14))

  return <Calendar mode="single" selected={date} onSelect={setDate} defaultMonth={new Date(2026, 9)} />
}
```

### Aralık

mode="range". Başlangıç ve bitiş dolu, aradaki günler bir şeritle birleşir.

**Örnek: Aralık** (`calendar/range`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/calendar/range)

```tsx
import * as React from "react"
import type { DateRange } from "react-day-picker"

import { Calendar } from "@/components/ui/calendar"

export default function CalendarRange() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: new Date(2026, 9, 6),
    to: new Date(2026, 9, 15),
  })

  return <Calendar mode="range" selected={range} onSelect={setRange} defaultMonth={new Date(2026, 9)} />
}
```

### Devre dışı günler ve ay/yıl seçimi

disabled matcher alır: `{ before: date }`, `{ after: date }`, `{ dayOfWeek: [0, 6] }`. captionLayout="dropdown" ay ve yıl seçimini açar; aralığı startMonth ve endMonth ile sınırlayın.

**Örnek: Devre dışı günler** (`calendar/disabled-days`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/calendar/disabled-days)

```tsx
import * as React from "react"

import { Calendar } from "@/components/ui/calendar"

/** Delivery day picker: weekends and past days are off, months and years from dropdowns. */
export default function CalendarDisabledDays() {
  const [date, setDate] = React.useState<Date | undefined>(new Date(2026, 9, 21))

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      captionLayout="dropdown"
      defaultMonth={new Date(2026, 9)}
      startMonth={new Date(2026, 0)}
      endMonth={new Date(2027, 11)}
      disabled={[{ before: new Date(2026, 9, 12) }, { dayOfWeek: [0, 6] }]}
    />
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Seçilemeyen günleri disabled ile kapatın; seçimden sonra hata göstermeyin.
- Yıllar arası gezinme gerekiyorsa captionLayout="dropdown" ile startMonth ve endMonth verin.

**Yapmayın:**

- Form alanında takvimi açık bırakmayın; Date Picker kullanın.
- Türkçe dışı bir panelde locale'i değiştirmeyi unutmayın.

## API

### `Calendar`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `locale` | `Partial<Locale>` | `tr` | Ay ve gün adlarının dili. react-day-picker ya da date-fns locale'i. |
| `weekStartsOn` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `1` | Haftanın ilk günü, 0 pazar. |
| `captionLayout` | `"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years"` | `"label"` | "dropdown" ay ve yıl seçimini açar; startMonth ve endMonth ile sınırlayın. |
| `showOutsideDays` | `boolean` | `true` | Önceki ve sonraki ayın günleriyle tabloyu doldurur. |