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
title-position
Type: String
Description: Position of the header title ("left", "center", "right").
Default: "center"
nav-visibility
Type: String
Description: Visibility state for calendar navigation panel ("focus", "hover", "visible", "hidden")
Default: undefined Resolved by defaults if not specified
is-expanded
Type: Boolean
Description: Expands calendar to fill the full width of its container.
Default: false
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
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.
from-page
Type: Object
Description: The page 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.
Use the .sync modifier for two-way binding.
from-date
Type: Date
Description: Date used to compute from-page.
Default: undefined
The .sync modifier does not work with this prop, unlike from-page.
to-page
Type: Object
Description: Page 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.
*Resolves to n month if not provided, where n = rows * columns.
Use the .sync modifier for two-way binding.
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
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: []
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
daymouseover
Description: Forwarded from the mouseover event for the day content element.
Params: day
daymouseleave
Description: Forwarded from the mouseleave event for the day content element.
Params: day
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() {
this.$refs.calendar.showPageRange({ from: new Date(0, 1, 2020), to: new Date(0, 31, 2020) });
}
...
showPageRange({ from, to })
Description: Navigates to the calendar page(s) that best displays a given date range.
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
header-left-button
Description: Calendar header button on the left side.
Props: page props
header-right-button
Description: Calendar header button on the right side.
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 |
← Defaults Page Object →