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

コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。

Name

dark

Default

false

Type

boolean

ダークテーマを適用します。

Name

day-format

Default

null

Type

function

Components.Calendars.

Name

end

Default

'0000-00-00'

Type

string

Components.Calendars.

Name

first-interval

Default

Type

number | string

Components.Calendars.

Name

hide-header

Default

false

Type

boolean

Components.Calendars.

Name

interval-count

Default

Type

number | string

Components.Calendars.

Name

interval-format

Default

null

Type

function

Components.Calendars.

Name

interval-height

Default

Type

number | string

Components.Calendars.

Name

interval-minutes

Default

Type

number | string

Components.Calendars.

Name

interval-style

Default

null

Type

function

Components.Calendars.

Name

light

Default

false

Type

boolean

ライトテーマを適用します。

Name

locale

Default

'en-us'

Type

string

Components.Calendars.

Name

max-days

Default

Type

number

Components.Calendars.

Name

min-weeks

Default

Type

any

Components.Calendars.

Name

month-format

Default

null

Type

function

Components.Calendars.

Name

now

Default

undefined

Type

string

Components.Calendars.

Name

short-intervals

Default

true

Type

boolean

Components.Calendars.

Name

short-months

Default

true

Type

boolean

Components.Calendars.

Name

short-weekdays

Default

true

Type

boolean

Components.Calendars.

Name

show-interval-label

Default

null

Type

function

Components.Calendars.

Name

show-month-on-first

Default

true

Type

boolean

Components.Calendars.

Name

start

Default

'2024-11-12'

Type

string

Components.Calendars.

Name

type

Default

'month'

Type

string

Components.Calendars.

Name

value

Default

undefined

Type

string

Components.Calendars.

Name

weekday-format

Default

null

Type

function

Components.Calendars.

Name

weekdays

Default

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

Type

array

Components.Calendars.

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.

Up Next

Edit this page | language on Github

— Contribution Guide