Calendar

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.

MoTuWeThFrSaSu

Selected: —

Months

Year: 2026 · Selected: —

Years

Selected: —

Range selection

Set mode="range" to pick a start and end. The same pattern works across all three views — only the bound model changes.

MoTuWeThFrSaSu

Start: — · End: —

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.

MoTuWeThFrSaSu

Start: — · End: —

Disabling

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.

MoTuWeThFrSaSu

Weekends are disabled. Selected: —

Enabled dates (whitelist)

enabledDates is the inverse: only values in the array are selectable, everything else is disabled. Works in every view.

MoTuWeThFrSaSu

Only Mondays are enabled. Selected: —

Minimum and maximum date

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.

MoTuWeThFrSaSu

Selected: —

Disable past / future

disable-past and disable-future disable all values strictly before or after today. Works in every view.

MoTuWeThFrSaSu
MoTuWeThFrSaSu
MoTuWeThFrSaSu
MoTuWeThFrSaSu

Allow gaps

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: —

MoTuWeThFrSaSu

The middle of the month is blocked — picking a start before it and an end after it resets the range. Start: — · End: —

Multiple months

numberOfMonths displays several months side by side. Only applies to view="days".

MoTuWeThFrSaSu
MoTuWeThFrSaSu

Locale

locale controls weekday and month header labels using Intl.DateTimeFormat. Any locale the runtime supports works without extra files.

MaDiWoDoVrZaZo

Week starts on

weekStartsOn controls the first column of the days grid: 0 = Sunday, 1 = Monday (default), … 6 = Saturday. Only applies to view="days".

SuMoTuWeThFrSa

Loading state

loading replaces day cells with skeletons. Provide a #skeleton slot to customize them.

MoTuWeThFrSaSu

Controlled current month/year

currentMonth and currentYear are v-model bindings, so you can drive navigation from outside the calendar.

8/2026
MoTuWeThFrSaSu

Slots

#skeleton
Custom skeleton shown in each cell while `loading` is true. Falls back to <AccUiLevSkeleton> when not provided.

Props

mode:'single' | 'range'— optional
default:range
Selection mode: pick a single date or a start/end range.
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.

CSS Variables

--lev-calendar-grid-gap
default:40px
Gap between month grids when numberOfMonths > 1.
--lev-calendar-row-gap
default:2px
Vertical gap between rows inside a grid.
--lev-calendar-column-gap
default:0px
Horizontal gap between columns inside a grid.
--lev-calendar-weekday-padding
default:8px 6px
Padding of weekday header labels.
--lev-calendar-weekday-color
default:#464747
Text color of weekday header labels.
--lev-calendar-weekday-font-size
default:12px
Font size of weekday header labels.
--lev-calendar-weekday-line-height
default:14px
Line height of weekday header labels.
--lev-calendar-cell-padding-y
default:8px
Vertical padding of a selectable cell.
--lev-calendar-cell-padding-x
default:6px
Horizontal padding of a selectable cell.
--lev-calendar-cell-font-size
default:14px
Font size of selectable cells.
--lev-calendar-cell-line-height
default:18px
Line height used for skeleton height calculation.
--lev-calendar-cell-bg
default:#ffffff
Background color of a selectable cell.
--lev-calendar-cell-color
default:#1a1a1a
Text color of a selectable cell.
--lev-calendar-cell-border
default:1px solid transparent
Border of a selectable cell.
--lev-calendar-cell-border-radius
default:4px
Border radius of a selectable cell.
--lev-calendar-cell-hover-border-color
default:#4a4a4a
Border color of a hovered, non-selected cell.
--lev-calendar-cell-disabled-color
default:color-mix(in srgb, currentColor 30%, transparent)
Text color of a disabled cell.
--lev-calendar-cell-current-period-hover-bg
default:#f3f4f6
Background of a hovered current-period cell.
--lev-calendar-cell-selected-bg
default:#1a62a9
Background of a selected / start / end cell.
--lev-calendar-cell-selected-color
default:#ffffff
Text color of a selected / start / end cell.
--lev-calendar-cell-between-bg
default:#e6f0fa
Background of a cell between start and end.
--lev-calendar-cell-range-radius
default:8px
Outer corner radius applied to start (left) and end (right) cells.

On This Page