# Calendar

A month grid for picking one date or a date range.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Calendar.tsx)

## Overview

A calendar is a month grid for picking one date or a date range.

Offer typed date entry beside it for dates far from today, such as birthdays.

## Examples

### Basic

```tsx
import { Calendar } from '@tempoxyz/ds'

export function Demo() {
  return <Calendar defaultValue={new Date()} />
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Calendar/Basic.tsx)

### Mode

Set `mode="range"` to select a `{ from, to }` range. It defaults to `single`.

```tsx
import { Calendar } from '@tempoxyz/ds'
import { useState } from 'react'

export function Demo() {
  const [range, setRange] = useState<Calendar.Range | null>(null)

  return <Calendar mode="range" onValueChange={setRange} value={range} />
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Calendar/Mode.tsx)

### Disabled Dates

Set `min`, `max`, or `isDateDisabled` to mark unavailable days.

```tsx
import { Calendar } from '@tempoxyz/ds'

export function Demo() {
  const today = new Date()

  return (
    <Calendar
      isDateDisabled={(date) => date.getDay() === 0}
      max={new Date(today.getFullYear(), today.getMonth() + 1, 20)}
      min={new Date(today.getFullYear(), today.getMonth() - 1, 5)}
    />
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Calendar/DisabledDates.tsx)

### Locale

Set `locale` to format the month and weekdays. It defaults to the browser's locale.

```tsx
import { Calendar } from '@tempoxyz/ds'

export function Demo() {
  return <Calendar locale="de-DE" />
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Calendar/Locale.tsx)

## Guidelines

TODO: Write guidelines for Calendar.