Essentials

Props

Every prop, with its type and default.

The calendar has 48 props. The calendar reads them when it is created, except modelValue and the data props markedDates, markedDateRange, disabledDates, enabledDates, disabledDayNames, limits, calendarsCount and isDark, which it watches. The same keys inside configs are watched too. Re-key the component to apply a change to any other prop.

Where options come from

From lowest to highest priority:

Defaults.
Global options from app.use(FunctionalCalendar, options). Only the options that configs also accepts apply.
The configs object, or the props if you do not pass configs. When configs is present, the props that it can hold are ignored.

configs holds every option on this page except modelValue, configs, activeHours, activeMinutes, borderColor, displayTimeInput, canClearRange, newCurrentDate and alwaysUseDefaultClasses. Those nine are always props.

An explicit dayNames, monthNames, shortMonthNames or sundayStart wins over a locale.

Value

Prop	Type	Default	Description
`modelValue`	`object`	none	The calendar state. Bind it with `v-model`. See the bound value. Watched.
`configs`	`object`	none	Settings as one object, instead of props.

Selection mode

Prop	Type	Default	Description
`isDatePicker`	`boolean`	`false`	Select one date.
`isMultipleDatePicker`	`boolean`	`false`	Select any number of dates.
`isDateRange`	`boolean`	`false`	Select a range.
`isMultipleDateRange`	`boolean`	`false`	With `isDateRange`, select several ranges.
`canClearRange`	`boolean`	`false`	Show the clear button of a range.
`minSelDays`	`number` or `false`	`false`	Shortest range, in days.
`maxSelDays`	`number` or `false`	`false`	Longest range, in days.
`presets`	`boolean` or `array`	`false`	Quick ranges. `true` shows all six built-ins. A list holds keys and `{ label, range }` objects. See presets.

Calendars and navigation

Prop	Type	Default	Description
`isMultiple`	`boolean`	`false`	Show several calendars.
`calendarsCount`	`number`	`1`	How many calendars, with `isMultiple`. Watched.
`isSeparately`	`boolean`	`false`	Give each calendar its own arrows and pickers.
`newCurrentDate`	`Date`	now	The month to show first.
`changeMonthFunction`	`boolean`	`false`	Click the month to pick another.
`changeYearFunction`	`boolean`	`false`	Click the year to pick another.
`changeMonthStep`	`number`	`1`	Months moved by an arrow.
`changeYearStep`	`number`	`3`	Years moved in the year picker.
`transition`	`boolean`	`true`	Slide between months.

Dates and limits

Prop	Type	Default	Description
`dateFormat`	`string`	`'dd/mm/yyyy hh:MM'`	Tokens `dd`, `mm` and `yyyy` with a `/`, `-` or `.` separator, then an optional time (`HH:MM`, `HH:mm`, `hh:MM` or `hh:mm`).
`limits`	`{ min, max }` or `false`	`false`	Dates outside are disabled. Watched.
`disabledDates`	`string[]`	`[]`	Disabled dates, plus `beforeToday` and `afterToday`. Watched.
`enabledDates`	`string[]`	`[]`	If not empty, only these dates (and the keywords) are enabled. Watched.
`disabledDayNames`	`string[]`	`[]`	Weekday names to disable, from `dayNames`. Watched.

Marking

Prop	Type	Default	Description
`markedDates`	`string[]` or `{ date, class }[]`	`[]`	Dates to mark. Objects add a class to the day. Watched.
`markedDateRange`	`{ start, end }` or an array of them	`{ start: false, end: false }`	Ranges to mark. `false` leaves a side open. Watched.
`showWeekNumbers`	`boolean`	`false`	Add a week number column.
`borderColor`	`string`	`''`	Border color of the week number column.

Time

Prop	Type	Default	Description
`withTimePicker`	`boolean`	`false`	Show the time picker after a date is chosen.
`displayTimeInput`	`boolean`	`false`	Add the time to a single date input.
`activeHours`	`number[]`	`0` to `23`	Hours users can pick.
`activeMinutes`	`number[]`	`0` to `59`	Minutes users can pick.

Prop	Type	Default	Description
`isModal`	`boolean`	`false`	Show inputs that open the calendar.
`isTypeable`	`boolean`	`false`	Let users type into the inputs.
`isAutoCloseable`	`boolean`	`false`	Close after a date or a range is chosen.
`placeholder`	`string` or `boolean`	the `dateFormat`	Input placeholder. Range inputs use the date part.

Names and locale

Prop	Type	Default	Description
`locale`	`string`	none	BCP 47 tag for names and week start. See locale.
`labels`	`object`	English	Partial UI strings, merged over the defaults. `labels.presets` merges key by key.
`dayNames`	`string[]`	`Mo` to `Su`	Seven names, Monday first.
`monthNames`	`string[]`	English	Twelve long names.
`shortMonthNames`	`string[]`	English	Twelve short names, shown in the month picker.
`sundayStart`	`boolean`	`false`	Start the week on Sunday.

Appearance

Prop	Type	Default	Description
`isDark`	`boolean`	`false`	Use the dark tokens. Watched.
`titlePosition`	`'left'`, `'center'` or `'right'`	`'center'`	Title alignment.
`arrowsPosition`	`'space-between'`, `'left'` or `'right'`	`'space-between'`	Arrow placement.
`hiddenElements`	`string[]`	`[]`	Any of `dayNames`, `leftAndRightDays`, `month` and `presets`.
`isLayoutExpandable`	`boolean`	`false`	Drop the reserved rows of short months.
`alwaysUseDefaultClasses`	`boolean`	`false`	Keep the default day classes when you use the day slot.

Methods

Call these through a template ref.

Method	Description
`PreMonth(calendarKey?)`, `NextMonth(calendarKey?)`	Move by `changeMonthStep`.
`PreYear(calendarKey?)`, `NextYear(calendarKey?)`	Move by one year.
`ChooseDate(date)`	Move to a date in `dateFormat`, or to `'today'`. Returns `false` and stays put when the month is outside `limits`. With several calendars, the view may start earlier so every calendar stays inside `max`.

Edit this pageorReport an issue

Accessibility

Grid semantics, labels and focus management.

Events

Every event and its payload.