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.

Utilização

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

API

Nome
color
Padrão
undefined
Tipos
string

Components.Calendars.

Nome
dark
Padrão
false
Tipos
boolean

Components.Calendars.

Nome
day-format
Padrão
null
Tipos
function

Components.Calendars.

Nome
end
Padrão
'0000-00-00'
Tipos
string

Components.Calendars.

Nome
first-interval
Padrão
0
Tipos
number | string

Components.Calendars.

Nome
hide-header
Padrão
false
Tipos
boolean

Components.Calendars.

Nome
interval-count
Padrão
24
Tipos
number | string

Components.Calendars.

Nome
interval-format
Padrão
null
Tipos
function

Components.Calendars.

Nome
interval-height
Padrão
40
Tipos
number | string

Components.Calendars.

Nome
interval-minutes
Padrão
60
Tipos
number | string

Components.Calendars.

Nome
interval-style
Padrão
null
Tipos
function

Components.Calendars.

Nome
light
Padrão
false
Tipos
boolean

Components.Calendars.

Nome
locale
Padrão
'en-us'
Tipos
string

Components.Calendars.

Nome
max-days
Padrão
7
Tipos
number

Components.Calendars.

Nome
min-weeks
Padrão
1
Tipos
any

Components.Calendars.

Nome
month-format
Padrão
null
Tipos
function

Components.Calendars.

Nome
now
Padrão
undefined
Tipos
string

Components.Calendars.

Nome
short-intervals
Padrão
true
Tipos
boolean

Components.Calendars.

Nome
short-months
Padrão
true
Tipos
boolean

Components.Calendars.

Nome
short-weekdays
Padrão
true
Tipos
boolean

Components.Calendars.

Nome
show-interval-label
Padrão
null
Tipos
function

Components.Calendars.

Nome
show-month-on-first
Padrão
true
Tipos
boolean

Components.Calendars.

Nome
start
Padrão
'2023-03-22'
Tipos
string

Components.Calendars.

Nome
type
Padrão
'month'
Tipos
string

Components.Calendars.

Nome
value
Padrão
undefined
Tipos
string

Controla visibilidade

Nome
weekday-format
Padrão
null
Tipos
function

Components.Calendars.

Nome
weekdays
Padrão
[0,1,2,3,4,5,6]
Tipos
array

Components.Calendars.

Exemplos

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