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

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.

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

*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: []

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

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());
}
...

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

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).

Description: Calendar navigation header button on the left side for moving to the previous page(s).

Description: Calendar navigation header button on the right side for moving to the next page(s).