A calendar component for selecting dates, months, or years — individually or as ranges.
Install
Run the following command to install the calendar component:
npx acc-nuxt add Calendar
Views
The calendar supports three views via the view prop: days (default), months, and years. Each view binds to a different model so you can use them independently. The examples below use mode="single"; range mode works the same way with the corresponding range model (selected-date-range / selected-month-range / selected-year-range).
Days (default)
Omitting view (or passing days) shows the day grid. Bind v-model:selected-date for single selection or v-model:selected-date-range for ranges.
Set mode="week" and bind v-model:selected-date-range to select seven days with one click. Week mode always uses the day grid. Hover previews the whole week in a separate color while keeping the selected week highlighted.
weekStartsOn controls the first day (Monday by default). Adjacent-month days are shown so each week is complete.
Date limits and maximumSelection must allow all seven days. The first and last days must be enabled. Set :allow-gaps="false" to require every day to be enabled.
MoTuWeThFrSaSu
Week: — to —
<template> <AcceleratorCalendar v-model:selected-date-range="selectedWeek" mode="week" :week-starts-on="1" /></template><script setup lang="ts">import type { RangeValue } from '@levarnebv/accelerator-nuxtv3-module/types';const selectedWeek = ref<RangeValue>();</script>
Maximum selection
maximumSelection limits how many units a range can span. The unit matches the active view: days for days, months for months, years for years.
Several props restrict which values a user can pick. They work in every view and combine with each other.
Disabled dates (blacklist)
Pass an array of values to disabledDates to disable them. The format must match the active view: YYYY-MM-DD for days, YYYY-MM for months, YYYY for years.
Use minDate and maxDate to define an inclusive selectable range. Values before minDate or after maxDate are disabled. The format must match the active view.
By default (:allow-gaps="true"), a range can pass over disabled values. Set :allow-gaps="false" to prevent this — the range resets when it would cross a gap. Applies to all views.
MoTuWeThFrSaSu
The middle of the month is blocked but the range can still span over it. Start: — · End: —
Select a single value, a range, or a seven-day week. Week mode always uses the day grid.
view:'days' | 'months' | 'years'— optional
default:days
Grid granularity: pick a day, a month, or a year.
disablePast:boolean— optional
default:false
Disable all values strictly before today.
disableFuture:boolean— optional
default:false
Disable all values strictly after today.
locale:string— optional
default:en
Locale code for weekday/month header labels.
weekStartsOn:0 | 1 | 2 | 3 | 4 | 5 | 6— optional
default:1
Day the week starts on (0 = Sunday … 6 = Saturday). Only applies to view="days".
numberOfMonths:number— optional
default:1
Number of months to display side by side. Only applies to view="days".
maximumSelection:number— optional
default:undefined
Maximum number of units selectable in a range. The unit matches the active view (days/months/years).
disabledDates:string[]— optional
default:undefined
Blacklist of disabled values. Format must match the active view: YYYY-MM-DD, YYYY-MM, or YYYY.
enabledDates:string[]— optional
default:undefined
Whitelist of enabled values; all others are disabled. Format must match the active view.
minDate:string— optional
default:undefined
Minimum inclusive value. Values before it are disabled; format must match the active view.
maxDate:string— optional
default:undefined
Maximum inclusive value. Values after it are disabled; format must match the active view.
loading:boolean— optional
default:false
Show skeleton cells instead of day buttons while data is loading.
allowGaps:boolean— optional
default:true
When false, range selection cannot pass over a disabled value — the range resets instead.
Bindings
v-model:selected-date:string
Selected day value in YYYY-MM-DD format.
v-model:selected-date-range:RangeValue
Selected day range or complete week in YYYY-MM-DD format.
v-model:selected-month:string
Selected month value in YYYY-MM format.
v-model:selected-month-range:RangeValue
Selected month range in YYYY-MM format.
v-model:selected-year:string
Selected year value in YYYY format.
v-model:selected-year-range:RangeValue
Selected year range in YYYY format.
v-model:current-month:number
Visible month number from 1 to 12.
v-model:current-year:number
Visible year used to anchor the calendar view.
Emits
@select
Emitted after selecting an enabled cell, including the same value again. Receives the clicked day (YYYY-MM-DD), month (YYYY-MM), or year (YYYY); week mode receives the clicked day.