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. Optionally you can pass in an array of events and they will be rendered over the appropriate days and times.

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.

name

dark

type

boolean

default

false

description

Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.

name

day-format

type

function

default

null

description

Formats day of the month string that appears in a day to a specified locale

name

end

type

string

default

'0000-00-00'

description

The ending date on the calendar (inclusive) in the format of YYYY-MM-DD. This may be ignored depending on the type of the calendar.

name

event-color

type

string | function

default

secondary

description

A background color for all events or a function which accepts an event object passed to the calendar to return a color.

name

event-end

type

string

default

'end'

description

Set property of event's end timestamp.

name

event-height

type

number

default

20

description

The height of an event in pixels in the month view and at the top of the day views.

name

event-margin-bottom

type

number

default

1

description

Margin bottom for event

name

event-more

type

boolean

default

true

description

Whether the more 'button' is displayed on a calendar with too many events in a given day. It will say something like '5 more' and when clicked generates a click:more event.

name

event-more-text

type

string

default

'$vuetify.calendar.moreEvents'

description

The text to display in the more 'button' given the number of hidden events.

name

event-name

type

string | function

default

name

description

Set property of event's displayed name, or a function which accepts an event object passed to the calendar as the first argument and a flag signalling whether the name is for a timed event (true) or an event over a day.

name

event-overlap-threshold

type

number

default

60

description

A value in minutes that's used to determine whether two timed events should be placed in column beside each other or should be treated as slightly overlapping events.

name

event-ripple

type

boolean | object

default

undefined

description

Applies the v-ripple directive.

name

event-start

type

string

default

'start'

description

Set property of event's start timestamp.

name

event-text-color

type

string | function

default

white

description

A text color for all events or a function which accepts an event object passed to the calendar to return a color.

name

events

type

array

default

[]

description

An array of event objects with a property for a start timestamp and optionally a name and end timestamp. If an end timestamp is not given, the value of start will be used. If no name is given, you must provide an implementation for the event slot.

name

first-interval

type

number | string

default

0

description

The first interval to display in the day view. If intervalMinutes is set to 60 and this is set to 9 the first time in the view is 9am.

name

hide-header

type

boolean

default

false

description

If the header at the top of the day view should be visible.

name

interval-count

type

number | string

default

24

description

The number of intervals to display in the day view.

name

interval-format

type

function

default

null

description

Formats time of day string that appears in the interval gutter of the day and week view to specified locale

name

interval-height

type

number | string

default

40

description

The height of an interval in pixels in the day view.

name

interval-minutes

type

number | string

default

60

description

The number of minutes the intervals are in the day view. A common interval is 60 minutes so the intervals are an hour.

name

interval-style

type

function

default

null

description

Returns CSS styling to apply to the interval.

name

light

type

boolean

default

false

description

Applies the light theme variant to the component.

name

locale

type

string

default

undefined

description

The locale of the calendar.

name

max-days

type

number

default

7

description

The maximum number of days to display in the custom calendar if an end day is not set.

name

min-weeks

type

any

default

1

description

The minimum number of weeks to display in the month or week view.

name

month-format

type

function

default

null

description

Formats month string that appears in a day to specified locale

name

now

type

string

default

undefined

description

Override the day & time which is considered now. This is in the format of YYYY-MM-DD hh:mm:ss. The calendar is styled according to now.

name

short-intervals

type

boolean

default

true

description

If true, the intervals in the day view will be 9 AM as opposed to 09:00 AM

name

short-months

type

boolean

default

true

description

Whether the short versions of a month should be used (Jan vs January).

name

short-weekdays

type

boolean

default

true

description

Whether the short versions of a weekday should be used (Mon vs Monday).

name

show-interval-label

type

function

default

null

description

Checks if a given day and time should be displayed in the interval gutter of the day view.

name

show-month-on-first

type

boolean

default

true

description

Whether the name of the month should be displayed on the first day of the month.

name

start

type

string

default

'2019-07-26'

description

The starting date on the calendar (inclusive) in the format of YYYY-MM-DD. This may be ignored depending on the type of the calendar.

name

type

type

string

default

'month'

description

A string which is one of month, week, day, 4day, custom-weekly, and custom-daily. The custom types look at the start and end dates passed to the component as opposed to the value.

name

value

type

string

default

undefined

description

A date in the format of YYYY-MM-DD which determines what span of time for the calendar.

name

weekday-format

type

function

default

null

description

Formats day of the week string that appears in the header to specified locale

name

weekdays

type

array

default

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

description

Specifies which days of the week to display. To display Monday through Friday only, a value of [1, 2, 3, 4, 5] can be used. To display a week starting on Monday a value of [1, 2, 3, 4, 5, 6, 0] can be used.

name

day

description

The content that is placed in a week or month view. The day & time object is passed through this slots scope.

This is an example of an event calendar with type of month. This shows the bare minimum configuration, an array of events with name, start and end properties. end is optional, it defaults to the start. If the start has a time it's considered a timed event and will be shown accordingly in the day views. An event can span multiple days and will be rendered accordingly.