@usevyre/react @usevyre/vue

Calendar

An always-visible date grid supporting single date, date range, and multiple date selection, with month/year navigation, an optional time picker, and min/max/disabled constraints. For an input-triggered popover use DatePicker; for start/end ranges with presets use DateRangePicker. Zero dependencies — built on native Intl APIs.

Single date

Default mode. Click any day to select it. Click again to deselect.

import { Calendar } from "@usevyre/react";

const [date, setDate] = useState<Date | null>(null);

<Calendar mode="single" value={date} onChange={setDate} />

<script setup>
import { Calendar } from "@usevyre/vue";
const date = ref(null);
</script>
<template>
  <Calendar mode="single" v-model="date" />
</template>

Date range

Set mode="range". First click sets the start date, second click sets the end. Hover previews the range before confirming.

import { Calendar } from "@usevyre/react";

const [range, setRange] = useState<[Date | null, Date | null]>([null, null]);

<Calendar mode="range" value={range} onChange={setRange} />

<script setup>
import { Calendar } from "@usevyre/vue";
const range = ref([null, null]);
</script>
<template>
  <Calendar mode="range" v-model="range" />
</template>

With time picker

Add showTime to include an HH:MM input below the grid. The time is stored in the same Date object.

import { Calendar } from "@usevyre/react";

const [date, setDate] = useState<Date | null>(null);

<Calendar mode="single" showTime value={date} onChange={setDate} />

<script setup>
import { Calendar } from "@usevyre/vue";
const date = ref(null);
</script>
<template>
  <Calendar mode="single" :show-time="true" v-model="date" />
</template>

Props

Prop	Type	Default	Description
`mode`	`"single" \| "range" \| "multiple"`	`"single"`	Selection mode. single picks one date, range picks start–end, multiple picks any number of dates.
`value / v-model`	`Date \| [Date\|null, Date\|null] \| Date[]`	`—`	Controlled selected value. Type depends on mode.
`onChange / @update:modelValue`	`(v) => void`	`—`	Called when the selection changes.
`showTime`	`boolean`	`false`	Adds an HH:MM time picker below the calendar grid.
`minDate`	`Date`	`—`	Dates before this are disabled.
`maxDate`	`Date`	`—`	Dates after this are disabled.
`disabled`	`(date: Date) => boolean`	`—`	Custom callback to disable specific dates.
`weekStartsOn`	`0 \| 1`	`1`	First day of the week. 0 = Sunday, 1 = Monday.
`defaultMonth`	`Date`	`—`	Month displayed initially when value is empty (uncontrolled view).
`class / className`	`string`	`—`	Additional CSS class on the root element.

AI Context

Valid props

Prop	Values	Default
`disabled`	`true`\|`false`	`false`

Common AI mistakes

Calendar for an input field that opens a popover→ Use <DatePicker /> (single date) or <DateRangePicker /> (range)
value as tuple for mode="single"→ Pass value matching mode; use mode="range" for [start,end]

Quick examples

Controlled date picker

const [date, setDate] = useState(null);
<Calendar value={date} onChange={setDate} />

← Button Card →