Props
rows
Type: Number
Description: Number of calendar rows to display.
Default: 1
columns
Type: Number
Description: Number of calendar columns to display.
Default: 1
step
Type: Number
Description: Number of months to step when navigating forwards and backwards.
Default: 0 Resolves to n if not provided, where n = rows * columns.
title-position
Type: String
Description: Position of the header title ("left", "center", "right").
Default: "center"
is-expanded
Type: Boolean
Description: Expands calendar to fill the full width of its container.
Default: false
nav-visibility
Type: String
Description: Visibility state for calendar navigation panel ("focus", "hover", "visible", "hidden")
Default: undefined Resolved by defaults if not specified
transition
Type: String
Description: Transition type for calendar panes when navigating to a new page ("slide-h": Horizontal slide, "slide-v": Vertical slide, "fade", "none").
Default: undefined Resolved by defaults if not specified
from-page
Type: Object
Description: The page (month, year) for the first calendar pane located at row 0 and column 0. Use the .sync modifier for two-way binding.
Default: undefined Resolves to current month if not provided.
TIP
Use the .sync modifier for two-way binding.
from-date
Type: Date
Description: Date used to compute from-page.
Default: undefined
WARNING
The .sync modifier does not work with this prop, unlike from-page.
to-page
Type: Object
Description: The page (month, year) for the last calendar pane located at row n and column n, where n is the max dimension.
Default: undefined Resolves to n month if not provided, where n = rows * columns.
TIP
*Resolves to n month if not provided, where n = rows * columns.
TIP
Use the .sync modifier for two-way binding.
WARNING
To avoid erratic navigation behavior, do not try to assign both from-page and to-page at the same time (just pick one).
to-date
Type: Date
Description: Date used to compute to-page.
Default: undefined
WARNING
The .sync modifier does not work with this prop, unlike to-page.
min-page
Type: Object
Description: Earliest page (month, year) that the user can navigate to.
Default: undefined
min-date
Type: Date
Description: Date used to compute min-page.
Default: undefined
max-page
Type: Object
Description: Latest page (month, year) that the user can navigate to.
Default: undefined
max-date
Type: Date
Description: Date used to compute max-page.
Default: undefined
attributes
Type: Array[Object]
Description: List of attributes to display in the calendar.
Default: []
disabled-dates
Type: Date that can be one of a Javascript date object, a date range object with start, end, span or pattern tokens
Description: Dates that are disabled from user selection or navigation.
Default: null
available-dates
Type: Date that can be one of a Javascript date object, a date range object with start, end, span or pattern tokens
Description: Dates or date range objects that are available for selection or navigation. All other dates are disabled.
Default Value: undefined
masks
Type: Object
Description: Masks to use when display and parsing dates for various calendar sections.
Default: undefined Resolved by defaults if not specified
color
Type: String
Description: Shortcut for specifying the theme color.
Default: undefined Resolved by theme if not specified
is-dark
Type: Boolean
Description: Shortcut for activating theme dark mode.
Default: undefed Resolved by theme if not specified
theme
Type: Object
Description: Theme settings used to customize the tint color, dark mode and classes for various calendar sections.
Default: undefined Resolved by defaults if not completely specified
first-day-of-week
Type: Number
Description: Day number for the first day of the week (1: Sun - 7: Sat). Ignore setting this prop if you want to allow the locale to determine this setting.
Default: undefined Resolved by locale if not specified
locale
Type: String, Object
Description: The locale identifier or locale configuration to use for displaying the calendar.
Default: undefined Resolved by defaults or detected locale if not completely specified
disable-page-swipe
Type: Boolean
Description: Disables swipe detection for navigating forwards and backwards.
Default: undefined
Events
update:frompage
Description: Calendar left/single pane moved to a different page.
Params: page
update:topage
Description: Calendar right pane moved to a different page.
Params: page
dayclick
Description: Forwarded from the mouseclick event for the day content element.
Params: day
daymouseenter
Description: Forwarded from the mouseenter event for the day content element.
Params: day
daymouseleave
Description: Forwarded from the mouseleave event for the day content element.
Params: day
dayfocusin
Description: Forwarded from the focusin event for the day content element.
Params: day
dayfocusout
Description: Forwarded from the focusout event for the day content element.
Params: day
transition-start
Description: Transition to new page has started.
transition-end
Description: Transition to new page has ended.
Methods
To call methods on a component, assign a ref and call the method any time on or after the mounted lifecycle hook.
<v-calendar ref="calendar' />
...
mounted() {
// Get reference to the calendar component
const calendar = this.$refs.calendar;
// Call method of the component
calendar.showPageRange(new Date());
}
...
move(Number|String|Date|Object)
Description
Asynchronously navigates by a given number of months, to a given month or to a given date.
async move(arg, opts) => Promise
Parameters
| Parameter | Type | Description |
|---|---|---|
| arg | *Number, Date, String or Page Object | Target month criteria |
| opts | Object | Set of navigation options |
| opts.position | Number | Target month position for multi-row or multi-column configurations. Negative numbers will offset from last position. |
| opts.transition | String | Transition type (slide-h, slide-v, fade, none). Note that this will override the calendar transition prop. |
| opts.force | Boolean | Force navigation even if the target months(s) are disabled |
Returns
A Promise that resolves when the transition to the new set of month(s) is complete or rejects if target month(s) are disabled.
Move by number of months
Moves a given number of months forwards or backwards.
Calling move(num) with a positive number will move forwards by a given number of months.
Calling move(num) with a negative number will move backwards by a given number of months.
<v-calendar ref="calendar">
// Get the calendar ref
const calendar = this.$refs.calendar
// Move forwards 5 months (wait for transition)
await calendar.move(5)
// Move backwards 5 months (wait for transition)
await calendar.move(-5)
Move to month
Moves to a given month by calling move(month) with an object with month and year keys.
// Get the calendar ref
const calendar = this.$refs.calendar
// Moves to January, 1983
await calendar.move({ month: 1, year: 1983 })
Move to a date
Moves to a specified date.
Calling move(date) with a Date object will move to that date.
Calling move(date) with a String will move to the converted date.
// Get the calendar ref
const calendar = this.$refs.calendar
// Moves to today's date
await calendar.move(new Date())
// Moves to my birthday
await calendar.move(`1983-01-21`)
WARNING
Calling move(date) will move to the month associated with that date. It will not focus on the date after the transition has occurred. To focus on the date, call focusDate(date) instead.
focusDate(String|Date)
Description
Asynchronously navigates to the month for a given date and focuses on that day after transition is complete.
async focusDate(date, opts) => Promise
Parameters
| Parameter | Type | Description |
|---|---|---|
| date | Date | Target date |
| opts | Object | Set of navigation options |
| opts.position | Number | Target month position for multi-row or multi-column configurations. Negative numbers will offset from last position. |
| opts.transition | String | Transition type (slide-h, slide-v, fade, none). Note that this will override the calendar transition prop. |
Returns
A Promise that resolves when the transition is complete or rejects if target month(s) are disabled.
showPageRange(Date|Object)
Description: Navigates to the calendar page(s) that best displays a given date range.
...
const date = new Date(2020, 0, 1); // January, 2020
const page = { month: 2, year: 2020 }; // February, 2020
// Pass a date
calendar.showPageRange(date);
// Pass a page ({ month, year })
calendar.showPageRange(page);
// From a date or page
calendar.showPageRange({ from: date });
// To a date or page
calendar.showPageRange({ to: page });
// From a date or page to a date or page
calendar.showPageRange({ from: date, to: page })
Scoped Slots
header
Description: Calendar header. Use slots below for specific header sections.
Props: page props
header-title
Description: Calendar header title. This slot is animated if title-transition is assigned.
Props: page props
day-content
Description: Calendar day content cell.
Props:
| Props | Type | Description |
|---|---|---|
day | Day Object | Day object. |
dayEvents | Object | Events that should get mapped to your custom content DOM element. |
attributes | Array | List of ordered attributes for the day. |
attributesMap | Object | Object map of the attributes using their designated key. |
day-popover
Description: Custom popover content for attributes.
Props:
| Props | Type | Description |
|---|---|---|
day | Day Object | Day object. |
attributes | Array | List of ordered attributes with an assigned popover for the day. |
masks | Object | Resolved locale masks |
format | Function | Call to format a custom date and mask |
dayTitle | String | Pre-formatted string using the dayPopover mask |
updateLayout | Function | Call to forcefully update the popover layout (such as when content changes are made) |
hide | Function | Call to forcefully hide the popover |
header-left-button
Description: Calendar header button on the left side for moving to the previous page(s).
header-right-button
Description: Calendar header button on the right side for moving to the next page(s).
nav-left-button
Description: Calendar navigation header button on the left side for moving to the previous page(s).
nav-right-button
Description: Calendar navigation header button on the right side for moving to the next page(s).