Calendar

Data

An interactive month calendar for date selection with keyboard navigation.

Props

Prop	Type	Default	Description
`modelValue`	`Date \| null`	—	Selected date (v-model).
`min`	`Date`	—	Minimum selectable date.
`max`	`Date`	—	Maximum selectable date.
`locale`	`string`	`'en-US'`	Locale for month/day labels.
`disabled`	`boolean`	`false`	Disable all date selection.
`showToday`	`boolean`	`true`	Show "Today" shortcut button.

Examples

Interactive

March 2026

MoTuWeThFrSaSu

Selected: Sunday, March 8, 2026

vue

<script setup lang="ts">
const selected = ref(new Date())
</script>

<template>
  <DsCalendar v-model="selected" />
  <p class="text-sm text-ds-fg-muted mt-2">
    Selected: {{ selected?.toLocaleDateString() }}
  </p>
</template>

Skeleton

Use DsCalendarSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsCalendarSkeleton />

Accessibility

Navigation buttons are keyboard focusable with aria-label.
Each day button has aria-label (full date) and aria-pressed (selected state).
Disabled days get disabled attribute.

Sparkline

DataTable