Calendar

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

Usage

A calendar has a type and a value which determines what type of calendar is shown over what span of time.

API

Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
day-format
Default
null
Type
function

Formats day of the month string that appears in a day to a specified locale

Name
end
Default
'0000-00-00'
Type
string

The ending date on the calendar (inclusive) in the format of YYYY-MM-DD. This may be ignored depending on the type of the calendar.

Name
first-interval
Default
0
Type
number | string

The first interval to display in the day view. If intervalMinutes is set to 60 and this is set to 9 the first time in the view is 9am.

Name
hide-header
Default
false
Type
boolean

If the header at the top of the day view should be visible.

Name
interval-count
Default
24
Type
number | string

The number of intervals to display in the day view.

Name
interval-format
Default
null
Type
function

Formats time of day string that appears in the interval gutter of the day and week view to specified locale

Name
interval-height
Default
40
Type
number | string

The height of an interval in pixels in the day view.

Name
interval-minutes
Default
60
Type
number | string

The number of minutes the intervals are in the day view. A common interval is 60 minutes so the intervals are an hour.

Name
interval-style
Default
null
Type
function

Returns CSS styling to apply to the interval.

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
locale
Default
'en-us'
Type
string

The locale of the calendar.

Name
max-days
Default
7
Type
number

The maximum number of days to display in the custom calendar if an end day is not set.

Name
min-weeks
Default
1
Type
any

The minimum number of weeks to display in the month or week view.

Name
month-format
Default
null
Type
function

Formats month string that appears in a day to specified locale

Name
now
Default
undefined
Type
string

Override the day & time which is considered now. This is in the format of YYYY-MM-DD hh:mm:ss. The calendar is styled according to now.

Name
short-intervals
Default
true
Type
boolean

If true, the intervals in the day view will be 9 AM as opposed to 09:00 AM

Name
short-months
Default
true
Type
boolean

Whether the short versions of a month should be used (Jan vs January).

Name
short-weekdays
Default
true
Type
boolean

Whether the short versions of a weekday should be used (Mon vs Monday).

Name
show-interval-label
Default
null
Type
function

Checks if a given day and time should be displayed in the interval gutter of the day view.

Name
show-month-on-first
Default
true
Type
boolean

Whether the name of the month should be displayed on the first day of the month.

Name
start
Default
'2023-03-22'
Type
string

The starting date on the calendar (inclusive) in the format of YYYY-MM-DD. This may be ignored depending on the type of the calendar.

Name
type
Default
'month'
Type
string

A string which is one of month, week, day, 4day, custom-weekly, and custom-daily. The custom types look at the start and end dates passed to the component as opposed to the value.

Name
value
Default
undefined
Type
string

A date in the format of YYYY-MM-DD which determines what span of time for the calendar.

Name
weekday-format
Default
null
Type
function

Formats day of the week string that appears in the header to specified locale

Name
weekdays
Default
[0,1,2,3,4,5,6]
Type
array

Specifies which days of the week to display. To display Monday through Friday only, a value of [1, 2, 3, 4, 5] can be used. To display a week starting on Monday a value of [1, 2, 3, 4, 5, 6, 0] can be used.

Examples

Slots

Slots allow you to define the content for each day, time interval for the daily views, and various labels.

Events

This is an example of an event calendar with type of month. Click on an event to show event details.

Weekly

This is an example of an event calendar with all-day and timed events with a type of week.

Daily

This is an example of calendar with content in each interval slot and a type of day.

Features

This example allows you to explore many of the features of the v-calendar component.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore