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.

Uso

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

API

Nombre

color

Default

undefined

Type

string

Aplica el color especificado al control.

Nombre

dark

Default

false

Type

boolean

Aplica la variante del tema dark

Nombre

day-format

Default

null

Type

function

Components.Calendars.

Nombre

end

Default

'0000-00-00'

Type

string

Components.Calendars.

Nombre

first-interval

Default

Type

number | string

Components.Calendars.

Nombre

hide-header

Default

false

Type

boolean

Components.Calendars.

Nombre

interval-count

Default

Type

number | string

Components.Calendars.

Nombre

interval-format

Default

null

Type

function

Components.Calendars.

Nombre

interval-height

Default

Type

number | string

Components.Calendars.

Nombre

interval-minutes

Default

Type

number | string

Components.Calendars.

Nombre

interval-style

Default

null

Type

function

Components.Calendars.

Nombre

light

Default

false

Type

boolean

Aplica la variante del tema light

Nombre

locale

Default

'en-us'

Type

string

Components.Calendars.

Nombre

max-days

Default

Type

number

Components.Calendars.

Nombre

min-weeks

Default

Type

any

Components.Calendars.

Nombre

month-format

Default

null

Type

function

Components.Calendars.

Nombre

now

Default

undefined

Type

string

Components.Calendars.

Nombre

short-intervals

Default

true

Type

boolean

Components.Calendars.

Nombre

short-months

Default

true

Type

boolean

Components.Calendars.

Nombre

short-weekdays

Default

true

Type

boolean

Components.Calendars.

Nombre

show-interval-label

Default

null

Type

function

Components.Calendars.

Nombre

show-month-on-first

Default

true

Type

boolean

Components.Calendars.

Nombre

start

Default

'2024-11-12'

Type

string

Components.Calendars.

Nombre

type

Default

'month'

Type

string

Components.Calendars.

Nombre

value

Default

undefined

Type

string

Controla la visibilidad

Nombre

weekday-format

Default

null

Type

function

Components.Calendars.

Nombre

weekdays

Default

[0,1,2,3,4,5,6]

Type

array

Components.Calendars.

Ejemplos

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.

Up Next

Edit this page | language on Github

— Contribution Guide