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

コンポーネントに色を設定します。この色は、定義されている色の名前(例えばsuccesspurple)や、CSSの色指定(#033rgba(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
0
Type
number | string

Components.Calendars.

Name
hide-header
Default
false
Type
boolean

Components.Calendars.

Name
interval-count
Default
24
Type
number | string

Components.Calendars.

Name
interval-format
Default
null
Type
function

Components.Calendars.

Name
interval-height
Default
40
Type
number | string

Components.Calendars.

Name
interval-minutes
Default
60
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
7
Type
number

Components.Calendars.

Name
min-weeks
Default
1
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
'2019-06-20'
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.

Edit this page | language on Github