# 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:from-page
Description: Calendar left/single pane moved to a different page.
Params: page
# update:to-page
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).