DOM Studio

Component

Calendar

<DomCalendar>

A compact month calendar for choosing a date, with month and year navigation.

Playground

Try every prop live

Calendar playground

Use the controls to move by month or year, then select a day in the grid.

June 2026

MonTueWedThuFriSatSun

Pick a date for the booking.

Playground.vuevue
<script setup>
import { reactive } from 'vue';
import { DomCalendar } from '@getdom/studio/vue';

const data = reactive({
	  "modelValue": "2026-06-18",
	  "id": "",
	  "name": "",
	  "label": "Booking date",
	  "description": "Pick a date for the booking.",
	  "placeholder": "",
	  "required": false,
	  "disabled": false,
	  "readOnly": false,
	  "invalid": false,
	  "errors": {},
	  "visible": true,
	  "validators": [],
	  "validateOnBlur": true,
	  "chrome": "field",
	  "locale": "en-GB",
	  "weekStartsOn": 1,
	  "initialMonth": 6,
	  "initialYear": 2026,
	  "min": "2026-01-01",
	  "max": "2026-12-31",
	  "showAdjacentDays": true,
	  "fixedWeeks": true,
	  "registerField": true,
	  "nativeInput": true
	});
</script>

<template>
	<DomCalendar
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Demo

Month date picker

The calendar emits a simple YYYY-MM-DD value that can be stored in a form or sent to an API.

June 2026

MonTueWedThuFriSatSun

Use the month and year controls to move through the calendar.

Selected date: 2026-06-18

BookingDate.vuevue
<script setup>
import { ref } from 'vue';
import { DomCalendar } from '../../../lib/vue';

const date = ref('2026-06-18');
</script>

<template>
	<div class="w-full max-w-sm">
		<DomCalendar
			v-model="date"
			label="Booking date"
			description="Use the month and year controls to move through the calendar."
			min="2026-01-01"
			max="2026-12-31"
		/>
		<p class="mt-3 text-xs text-muted-fg">
			Selected date: <code class="text-fg">{{ date }}</code>
		</p>
	</div>
</template>

Reference

Props

Control props

NameTypeTSDefaultDescription
modelValuestringstring''Selected date as YYYY-MM-DD.
disabledbooleanbooleanfalseDisable date selection.
localestringstring'en-GB'Locale used for month and weekday labels.
weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 6number1First day of week. 0 is Sunday, 1 is Monday.
initialMonthnumbernumber—Initial visible month, 1-12. Ignored when modelValue has a valid date.
initialYearnumbernumber—Initial visible year. Ignored when modelValue has a valid date.
minstringstring''Minimum selectable date as YYYY-MM-DD.
maxstringstring''Maximum selectable date as YYYY-MM-DD.
showAdjacentDaysbooleanbooleantrueShow dates from the previous and next months in the grid.
fixedWeeksbooleanbooleantrueAlways render six weeks so the calendar height stays stable.
registerFieldbooleanbooleantrueRegister with a parent form. Disable when embedding the calendar inside another form control.
nativeInputbooleanbooleantrueRender the hidden native input used for HTML form submission.

Field props

NameTypeTSDefaultDescription
idstringstring''Optional ID override. By default parent forms derive the input ID from the field path using underscores.
namestringstring''Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
labelstringstring''Visible field label.
descriptionstringstring''Optional helper copy below the field.
placeholderstringstring''Placeholder shown when the control is empty.
requiredbooleanbooleanfalseMark the field as required.
readOnlybooleanbooleanfalseShow the value but prevent editing.
invalidbooleanbooleanfalseMark the field invalid.
errors
[
	{
		name: "Validation name",
		message: "Error message",
	}
]
array | object | stringArray<ErrorsItem
type ErrorsItem = {
	name?: string; // Name
	message?: string; // Message
};
>		{}Validation errors for this field.
visiblebooleanbooleantrueShow or hide the field.
validatorsarrayArray<unknown>[]Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
validateOnBlurbooleanbooleantrueRun validators when the field loses focus.
chrome'field' | falsestring'field'Render default field chrome, or false to render only the control while keeping form state wiring.

Auto-generated from Calendar.props and inline _edit hints.

Events

NamePayloadDescription
@update:modelValueYYYY-MM-DDFired when a date is selected.
@changeYYYY-MM-DDFired when a date is selected.
@view-change({ month, year })Fired when the visible month or year changes.
@focus——
@blur——

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.