ICalendar ​

A month grid that stays on the page. The same grid IDatePicker puts behind a field, for the times a popover is the wrong shape: a booking page, an availability view, a date shown beside the thing it applies to.

<script setup lang="ts">
const day = ref('2026-09-14')
</script>

<template>
  <ICalendar v-model="day" label="Choose a day" />
</template>

The model is an ISO YYYY-MM-DD string, never a Date — see the date helpers for why. Clicking the selected day again clears it, unless preventDeselect is set.

Picker or calendar ​

Reach for IDatePicker inside a form: a field the reader scans past until they need it, in a column of other fields. Reach for ICalendar when choosing the date is the task on the page, or when what is available has to be visible without opening anything.

Several months ​

months shows more than one at a time, which is what makes a span legible without paging back and forth. pagedNavigation then advances a whole view at a time rather than a single month.

<ICalendar v-model="span" :months="2" paged-navigation />

For picking a start and an end rather than one day, use IDateRangePicker.

Bounds and availability ​

min and max fence the selectable range. isUnavailable refuses individual days — a taken slot, a closed day — and is given an ISO string, not a DateValue.

<script setup lang="ts">
const taken = ['2026-09-16', '2026-09-17', '2026-09-22']

function isClosed(date: string) {
  const weekday = new Date(`${date}T00:00:00`).getDay()
  return weekday === 0 || weekday === 6
}
</script>

<template>
  <ICalendar
    v-model="booking"
    min="2026-09-01"
    max="2026-10-31"
    :is-unavailable="date => taken.includes(date) || isClosed(date)"
  />
</template>

The two states are drawn differently on purpose. A day outside min/max is faded — it is not part of this calendar's business. An unavailable day is struck through, because it is a real day that someone has already taken: hiding it would leave the reader wondering whether they had misread the month.

Weeks ​

weekStartsOn overrides the locale's own convention — 0 is Sunday. weekdayFormat sets how the headings read.

<ICalendar v-model="day" locale="en-GB" weekday-format="short" />
<ICalendar v-model="day" :week-starts-on="0" />

Every month is six rows tall by default. fixedWeeks turns that off, at the cost of the calendar changing height as the reader pages through it — which moves everything below it on the page.

Accessibility ​

label names the calendar for a screen reader; without one it is an unnamed grid. Arrow keys move by day, PageUp and PageDown by month, and Home / End reach the ends of the week — all of that is Reka's, not ours. initialFocus moves focus to the selected day on mount, which is right inside a popover and usually wrong on a page that has other content above it.

Props ​