FormCalendar

A month grid with a roving tabindex, arrow keys, Home, End and page keys, bounds, disabled days and range selection.

import { FormCalendar } from '@zairakai/vue-components/Form'

Usage

<FormCalendar />

Example

October 2026

Mon	Tue	Wed	Thu	Fri	Sat	Sun

Day: 2026-10-06

<script setup>
  import { ref } from 'vue'

  const day = ref('2026-10-06')
</script>

<template>
  <FormCalendar
    v-model="day"
    locale="en-GB"
  />
  <p>Day: {{ day }}</p>
</template>

Props

Name	Type	Default	Description
id	string
class	string
modelValue	string|object	undefined	The chosen day (2026-10-05), or { start, end } when range.
range	boolean	false
min	string
max	string
weekStart	number	1	The first day of the week: 0 Sunday, 1 Monday.
locale	string
isDisabled	func	() => false	A function (iso) => boolean to disable some days.
previousLabel	string	'Previous month'
nextLabel	string	'Next month'

Events

Name	Description
update:modelValue
update:month

See Theming for the class hooks and the data-* state of the components.