BaseCalendar

A month of days, for choosing one or a stretch of them.

Import it from rei-kit: import { BaseCalendar } from 'rei-kit'

Open BaseCalendar in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { BaseCalendar, todayKey } from 'rei-kit'

const day = ref<string | undefined>(todayKey())
</script>

<template>
  <BaseCalendar
    v-model="day"
    previous-label="Previous month"
    next-label="Next month"
    :min="todayKey()"
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`mode`	`M`	'single' as M	One day, or a stretch from one day to another.
`min`	`string`	undefined	The earliest day that can be chosen, as `YYYY-MM-DD`.
`max`	`string`	undefined
`isDisabled`	`((key: string) => boolean)`	undefined	Days to rule out inside the range — weekends, days already booked.
`weekStartsOn`	`WeekStart`	1	`1` Monday, `0` Sunday.
`previousLabel`	`string`	yes	Accessible name of the back arrow, e.g. "Previous month".
`nextLabel`	`string`	yes	Accessible name of the forward arrow.
`today`	`string`	todayKey()	Which day is marked as today. Given, so a test or a demo can fix it.

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub