Calendars

The v-calendar component is used to display information in a daily, weekly, monthly. The daily view has slots for all day or timed elements, and the weekly and monthly view has a slot for each day.

WARNING

This feature requires v3.4.9

Installation

Labs components require a manual import and installation of the component.

import { VCalendar } from 'vuetify/labs/VCalendar'

export default createVuetify({
  components: {
    VCalendar,
  },
})

Usage

A calendar has a type and a value which determines what type of calendar is shown over what span of time. This shows the bare minimum configuration, an array of events with title, start and end properties. end is optional, it defaults to the start. If the start has a time it's considered a timed event and will be shown accordingly in the day views. An event can span multiple days and will be rendered accordingly.

API

Component	Description
v-calendar	Primary Component

Guide

The v-calendar component in Vuetify offers a versatile solution for building various calendar interfaces. It's designed to be highly customizable, catering to a wide range of applications from simple date pickers to complex event calendars.

Props

The v-calendar component is equipped with a range of props that allow you to tailor its functionality and appearance to your specific requirements. This section will provide an overview of the available properties, offering insights into their usage and impact on the calendar's behavior and presentation.

Type month

This is a calendar with the type of month

Type week

This is a calendar with the type of week

Type day

This is a calendar with the type of day