V-Calendar

Properties

componentPrefix

Type: String

Description: Custom prefix to use for plugin components. Replace if v-calendar and v-date-picker interfere with other component libraries.

Default: "v"

titlePosition

Type: String

Description: Position of the title in the header ("left", "center", "right")

Default: "center"

Type: String

Description: Visibility state for calendar navigation panel ("focus", "hover", "visible", "hidden")

Default: "focus"

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: "slide-h" when row === 1 && column === 1, "fade" otherwise.

masks

Type: Object

Description: Masks to use when display and parsing dates for various calendar sections.

Default:

{
  title: 'MMMM YYYY',
  weekdays: 'W',
  navMonths: 'MMM',
  input: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'],
  dayPopover: 'WWW, MMM D, YYYY',
  data: ['L', 'YYYY-MM-DD', 'YYYY/MM/DD'],
}

screens

Type: Object

Description: Screen size breakpoints to use to obtain responsive layouts by calling the $screens function.

Default:

{
  "sm": "640px",
  "md": "768px",
  "lg": "1024px",
  "xl": "1280px"
}

theme

Type: Object

Description: Theme settings used to customize the tint color, dark mode and classes for various calendar sections.

Default: Reference the theming guide for providing default theme settings

locale

Type: String, Object

Description: Locale identification string in language-region format, or set of locale configuration properties if object is provided.

Default: undefined

locales

Type: Object

Description: Use this object if your locales are missing or you wish to override specific settings for existing locales. The key should match the locale identifier ('en-US') and the value may optionally include any of the following property settings:

Setting Description
firstDayOfWeek The day the specified the first day of the week. This is a number from 1 to 7 (Sunday to Saturday, respectfully).
masks Set of masks to use for common sections of the calendar including the title, weekday labels, month labels in the navigation pane and more.

Default:

datePicker

Type: Object

Description: Defaults applied for date picker only.

Default: Reference below for default values

datePicker.updateOnInput

Type: Boolean

Description: Update the picker value after every input event. Otherwise, value is just updated on change event.

Default Value: true

datePicker.inputDebounce

Type: Number

Description: If update-on-input is enabled, the duration in milliseconds at which the input event is debounced before updating the date value.

Default Value: 1000

datePicker.popover

Type: Object

Description: Properties of the popover to apply for the calendar component. Not applicable when is-inline === true.

Default Value: Reference below for default values.

datePicker.popover.visibility

Type: String

Description: Visibility state of the popover ("hover-focus", "hover", "focus", "click", "visible", "hidden")

Default: "hover-focus"

datePicker.popover.keepVisibleOnInput

Type: Boolean

Description: Keep the popover visible after a valid input has been selected

Default: false

datePicker.popover.placement

Type: String

Description: Default or suggested placement of the popover. This may change as the browser window dimensions change.

Default: "bottom"

touch

Type: Object

Description: Defaults applied for touch swipes

Default: Reference below for default values

touch.maxSwipeTime

Type: Number

Description: Maximum time in milliseconds allowed for a swipe gesture to complete

Default: 300

touch.minHorizontalSwipeDistance

Type: Number

Description: Minimum distance in pixels allowed for a horizontal swipe gesture

Default: 60

touch.maxVerticalSwipeDistance

Type: Number

Description: Maximum distance in pixels allowed for a horizontal swipe gesture

Default: 80

← Calendar →