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

默认值

类型

number | string

Components.Calendars.

名称

hide-header

默认值

false

类型

boolean

Components.Calendars.

名称

interval-count

默认值

类型

number | string

Components.Calendars.

名称

interval-format

默认值

null

类型

function

Components.Calendars.

名称

interval-height

默认值

类型

number | string

Components.Calendars.

名称

interval-minutes

默认值

类型

number | string

Components.Calendars.

名称

interval-style

默认值

null

类型

function

Components.Calendars.

名称

light

默认值

false

类型

boolean

应用明亮主题变体

名称

locale

默认值

'en-us'

类型

string

Components.Calendars.

名称

max-days

默认值

类型

number

Components.Calendars.

名称

min-weeks

默认值

类型

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

默认值

'2023-03-22'

类型

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.

Up Next

Edit this page | language on Github

— Contribution Guide