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.

Применение

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

API

Имя
color
По умолчанию
undefined
Тип
string

Применяет заданный цвет к элементу управления

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
day-format
По умолчанию
null
Тип
function

Components.Calendars.

Имя
end
По умолчанию
'0000-00-00'
Тип
string

Components.Calendars.

Имя
first-interval
По умолчанию
0
Тип
number | string

Components.Calendars.

Имя
hide-header
По умолчанию
false
Тип
boolean

Components.Calendars.

Имя
interval-count
По умолчанию
24
Тип
number | string

Components.Calendars.

Имя
interval-format
По умолчанию
null
Тип
function

Components.Calendars.

Имя
interval-height
По умолчанию
40
Тип
number | string

Components.Calendars.

Имя
interval-minutes
По умолчанию
60
Тип
number | string

Components.Calendars.

Имя
interval-style
По умолчанию
null
Тип
function

Components.Calendars.

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
locale
По умолчанию
'en-us'
Тип
string

Components.Calendars.

Имя
max-days
По умолчанию
7
Тип
number

Components.Calendars.

Имя
min-weeks
По умолчанию
1
Тип
any

Components.Calendars.

Имя
month-format
По умолчанию
null
Тип
function

Components.Calendars.

Имя
now
По умолчанию
undefined
Тип
string

Components.Calendars.

Имя
short-intervals
По умолчанию
true
Тип
boolean

Components.Calendars.

Имя
short-months
По умолчанию
true
Тип
boolean

Components.Calendars.

Имя
short-weekdays
По умолчанию
true
Тип
boolean

Components.Calendars.

Имя
show-interval-label
По умолчанию
null
Тип
function

Components.Calendars.

Имя
show-month-on-first
По умолчанию
true
Тип
boolean

Components.Calendars.

Имя
start
По умолчанию
'2024-11-12'
Тип
string

Components.Calendars.

Имя
type
По умолчанию
'month'
Тип
string

Components.Calendars.

Имя
value
По умолчанию
undefined
Тип
string

Контроль видимости

Имя
weekday-format
По умолчанию
null
Тип
function

Components.Calendars.

Имя
weekdays
По умолчанию
[0,1,2,3,4,5,6]
Тип
array

Components.Calendars.

Примеры

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