Skip to main content

​
Calendar

The VCalendar component is a flexible calendar display that supports multiple view types, event handling, and customizable time ranges.

​
Usage

<template>
  <v-calendar
    v-model="date"
    :events="events"
    type="month"
  />
</template>

<script setup>
import { ref } from 'vue'

const date = ref(new Date())
const events = ref([
  {
    title: 'Team Meeting',
    start: '2024-03-15 10:00',
    end: '2024-03-15 11:00',
    color: 'primary'
  }
])
</script>

​
API

​
Props

​
modelValue
string | number | Date
The currently selected date. Can be a date string, timestamp, or Date object.
​
type
string
default:"month"
Calendar display type. Options: month, week, day, 4day, category, custom-weekly, custom-daily.
​
events
CalendarEvent[]
Array of events to display on the calendar.
​
categories
CalendarCategory[] | string
Categories for category view mode.
​
categoryDays
number | string
default:"1"
Number of days to show in category view.
​
maxDays
number
default:"7"
Maximum number of days to display.
​
categoryHideDynamic
boolean
default:"false"
Hide dynamically created categories.
​
categoryShowAll
boolean
default:"false"
Show all categories even if they have no events.
​
categoryForInvalid
string
default:"''"
Category name for events with invalid categories.

​
Events

​
update:modelValue
(date: string) => void
Emitted when the selected date changes.
​
change
(range: { start: CalendarTimestamp, end: CalendarTimestamp }) => void
Emitted when the visible date range changes.
​
moved
(date: CalendarTimestamp) => void
Emitted when navigating to a different time period.

​
Slots

​
day
{ date, outside, index, week }
Customize individual day cells.
​
day-body
CalendarDayBodySlotScope
Customize the body content of day cells.
​
day-header
CalendarDayHeaderSlotScope
Customize the header of day cells.
​
event
EventSlotScope
Customize individual event display.
​
category
CalendarDayCategorySlotScope
Customize category rows in category view.

​
Examples

​
Week View

<template>
  <v-calendar
    v-model="date"
    type="week"
    :events="events"
  />
</template>

​
Category View

<template>
  <v-calendar
    v-model="date"
    type="category"
    :categories="['Work', 'Personal', 'Other']"
    :events="events"
  />
</template>

​
Custom Event Display

<template>
  <v-calendar v-model="date" :events="events">
    <template #event="{ event }">
      <div class="custom-event">
        <strong>{{ event.title }}</strong>
        <div>{{ event.time }}</div>
      </div>
    </template>
  </v-calendar>
</template>

​
Methods

The component exposes several methods through template refs:
  • next(amount?: number) - Navigate forward in time
  • prev(amount?: number) - Navigate backward in time
  • move(amount: number) - Move by a specific amount
<script setup>
const calendarRef = ref()

function goToNextMonth() {
  calendarRef.value.next()
}
</script>

Build docs developers (and LLMs) love

Get started for freeTalk to us