# Calendar · MIAN

A month grid for picking a date, on its own or in a popover as a date field. Full keyboard support and locale-aware names.

- Id: `calendar` · Category: Forms · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/calendar
- Use for: date picker, booking calendar, date range picker, check-in check-out, choose a day.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-calendar`: The calendar. mian.js renders the month grid inside it.
- `data-value="YYYY-MM-DD"`: Selected date.
- `data-min · data-max`: Earliest and latest selectable date.
- `data-week-start="0–6"`: First day of the week (0 = Sunday, default 1 = Monday).
- `data-mn-for="#input"`: Keeps an input in sync; inside a [popover] the calendar closes after a choice.
- `data-range`: Pick a range. data-value="YYYY-MM-DD/YYYY-MM-DD"; data-mn-start / data-mn-end keep two inputs in sync; mn:change carries { start, end, nights }.

## Accessibility

- The grid is a table with role="grid", column headers with full weekday names (abbr) and a live month title.
- Only one day is in the tab order. Arrow keys move by day and week, Page Up/Down by month (Shift: year), Home/End to the week’s edges, Enter or Space selects.
- Each day button has a full date as its accessible name; today is aria-current="date", the chosen day aria-pressed="true".
- Emits mn:change with { value } as YYYY-MM-DD.

## Examples

### Calendar

```html
<div class="mn-calendar" data-value="2026-09-25" aria-label="Choose a date"></div>
```

### Date field

An input with a calendar in a popover. Typing a date also works.

```html
<div class="mn-field" style="max-width:16rem">
  <label class="mn-label" for="date-1">Start date</label>
  <div class="mn-input-group">
    <input class="mn-input" id="date-1" placeholder="YYYY-MM-DD" inputmode="numeric" value="2026-10-02">
    <button class="mn-btn mn-btn-ghost mn-btn-icon mn-btn-sm" type="button" popovertarget="date-1-cal" aria-label="Choose date"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg></button>
  </div>
</div>
<div class="mn-popover" id="date-1-cal" popover data-placement="bottom-end"><div class="mn-calendar" data-mn-for="#date-1" data-min="2026-09-01"></div></div>
```

### Date range

Check-in and check-out: the first choice starts the range, the second ends it. Hover previews it.

```html
<div class="mn-stack" style="max-width:20rem;--mn-gap:.75rem">
  <div class="mn-form-row"><div class="mn-field"><label class="mn-label" for="stay-in">Check-in</label><input class="mn-input" id="stay-in" value="2026-10-09" readonly></div><div class="mn-field"><label class="mn-label" for="stay-out">Check-out</label><input class="mn-input" id="stay-out" value="2026-10-12" readonly></div></div>
  <div class="mn-calendar" data-range data-value="2026-10-09/2026-10-12" data-min="2026-09-25" data-mn-start="#stay-in" data-mn-end="#stay-out" aria-label="Choose your dates"></div>
</div>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/calendar/source