# Calendar

```tsx
import { Calendar } from '@tangible/ui';
```

Interactive docs and examples: [Calendar in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/forms-calendar--docs).

## Calendar props

| Prop | Type | Default | Description |
| - | - | - | - |
| `aria-label?` | `string` | | |
| `className?` | `string` | | |
| `defaultMonth?` | `Date` | | Initial visible month for uncontrolled usage. |
| `isDayDisabled?` | `(day: Date) => boolean` | | Per-day disable hook, applied on top of min/max. |
| `labels?` | `CalendarLabels` | | Override default English strings for i18n. |
| `locale?` | `string` | `the document language, falling back to 'en-US'` | BCP 47 locale for month/weekday names and numeric formats. |
| `max?` | `Date` | | Latest selectable day (inclusive, time-of-day ignored). |
| `min?` | `Date` | | Earliest selectable day (inclusive, time-of-day ignored). |
| `month?` | `Date` | | Controlled visible month (any day within it). |
| `onChange?` | `(day: Date) => void` | | Day clicked/chosen. Receives the calendar day at noon; callers merge their own time-of-day (see `withDay`). |
| `onMonthChange?` | `(month: Date) => void` | | |
| `range?` | `DateRange \| null` | | Range to paint (endpoints + in-between fill). Painting only — range *selection* logic lives in DateRangePicker. |
| `value?` | `Date \| null` | | Selected day. |
| `weekStartsOn?` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `1` | First day of the week. 0 = Sunday … 6 = Saturday. |

## Other exports

- `defaultCalendarLabels`: `Required<CalendarLabels>`

## Examples

Stories: Default, Min/Max bounds, Range painting (via DateRangePicker), Week Starts Sunday, Localised (de-DE) ([interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/forms-calendar--docs)).

Component API tokens: shared with [DatePicker](https://storybook-tangible-ui.pages.dev/docs/components/datepicker.md).

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/forms-calendar--docs