The v-calendar component is used to display information in a daily, weekly, monthly, or category view. The daily view has slots for all day or timed elements, and the weekly and monthly view has a slot for each day. The category view has a slot for each category in the day and timed sections based on the categories given or the categories in the given events. Optionally you can pass in an array of events and they will be rendered over the appropriate days and times.
A calendar has a type and a value which determines what type of calendar is shown over what span of time. 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.
Select your desired component from below and see the available props, slots, events and functions.
Specifies what categories to display in the category view. This controls the order of the categories as well. If the calendar uses events any categories specified in those events not specified in this value are dynamically rendered in the view unless category-hide-dynamic is true.
The number of days to render in the category view.
The category to place events in that have invalid categories. A category is invalid when it is not a string. By default events without a category are not displayed until this value is specified.
Sets whether categories specified in an event should be hidden if it's not defined in categories.
Set whether the category view should show all defined categories even if there are no events for a category.
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.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Formats day of the month string that appears in a day to a specified locale
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.
Set property of event's category. Instead of a property a function can be given which takes an event and returns the category.
A background color for all events or a function which accepts an event object passed to the calendar to return a color.
Set property of event's end timestamp.
The height of an event in pixels in the month view and at the top of the day views.
Margin bottom for event
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.
The text to display in the more 'button' given the number of hidden events.
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.
One of stack, column, or a custom render function
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.
Applies the v-ripple directive.
Set property of event's start timestamp.
A text color for all events or a function which accepts an event object passed to the calendar to return a color.
If Dates or milliseconds are used as the start or end timestamp of an event, this prop can be a string to a property on the event that is truthy if the event is a timed event or a function which takes the event and returns a truthy value if the event is a timed event.
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.
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.
The first time to display in the day view. If specified, this overwrites any firstInterval value specified. This can be the number of minutes since midnight, a string in the format of HH:mm, or an object with number properties hour and minute.
If the header at the top of the day view should be visible.
The number of intervals to display in the day view.
Formats time of day string that appears in the interval gutter of the day and week view to specified locale
The height of an interval in pixels in the day view.
The number of minutes the intervals are in the day view. A common interval is 60 minutes so the intervals are an hour.
Returns CSS styling to apply to the interval.
The width of the interval gutter on the left side in the day view.
Applies the light theme variant to the component.
The locale of the calendar.
Sets the day that determines the first week of the year, starting with 0 for Sunday. For ISO 8601 this should be 4.
The maximum number of days to display in the custom calendar if an end day is not set.
The minimum number of weeks to display in the month or week view.
Formats month string that appears in a day to specified locale
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.
If true, the intervals in the day view will be 9 AM as opposed to 09:00 AM
Whether the short versions of a month should be used (Jan vs January).
Whether the short versions of a weekday should be used (Mon vs Monday).
Checks if a given day and time should be displayed in the interval gutter of the day view.
Whether the name of the month should be displayed on the first day of the month.
Whether weeknumbers should be displayed when using the month view.
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.
A string which is one of month, week, day, 4day, custom-weekly, custom-daily, and category. The custom types look at the start and end dates passed to the component as opposed to the value.
A date in the format of YYYY-MM-DD which determines what span of time for the calendar.
Formats day of the week string that appears in the header to specified locale
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.
The content placed in a category header for the category type. The category variable is null for events with invalid (non-string) categories.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The content that is placed in a week or month view. The day & time object is passed through this slots scope.
{
outside: boolean
index: number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The content that is placed in a day view in the scrollable interval container. The day & time object is passed through this slots scope.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The content that is placed in a day view in the top container. The day & time object is passed through this slots scope.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The content that is placed in the day of the month space in the custom-weekly or month view. The day & time object is passed through this slots scope.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The content that is placed in the day of the month space in the week, day, 4day, or custom-daily view. The day & time object is passed through this slots scope.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The content that is placed in the month space in the week or month view. The day & time object is passed through this slots scope.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The content placed in an event. This ignores the event-name prop.
{
event: any
eventParsed: {
input: any
start: {
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
},
startIdentifier: number
startTimestampIdentifier: number
end: {
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
},
endIdentifier: number
endTimestampIdentifier: number
allDay: boolean
index: number
category: string
},
day: {
outside: boolean
index: number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
},
outside: boolean
start: boolean
end: boolean
timed: boolean
singleline: boolean
overlapsNoon: boolean
formatTime: (time: VTimestamp, ampm: boolean): string
timeSummary: (): string
eventSummary: (): string
}The content that is placed in the interval space in the day view. The day & time object is passed through this slots scope.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The range of days displayed on the calendar changed. This is triggered on initialization. The event passed is an object with start and end date objects.
{
start: {
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
},
end: {
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
}The click event on the day of the month link. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The click event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The click event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The click event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The click event on the X more button on views with too many events in a day.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The click event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The click event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The right-click event on the day of the month link. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The right-click event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The right-click event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The right-click event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The right-click event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The right-click event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}An alias to the click:date event used to support v-model.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The mousedown event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mousedown event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mousedown event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The mousedown event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mousedown event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mouseenter event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mouseenter event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mouseenter event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The mouseenter event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mouseenter event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mouseleave event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mouseleave event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mouseleave event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The mouseleave event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mouseleave event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mousemove event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mousemove event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mousemove event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The mousemove event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mousemove event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mouseup event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mouseup event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The mouseup event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The mouseup event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The mouseup event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}One of the functions next, prev, and move was called. The event passed is the day object calculated for the movement.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The touchend event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The touchend event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The touchend event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The touchend event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The touchend event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The touchmove event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The touchmove event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The touchmove event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The touchmove event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The touchmove event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The touchstart event on a day. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The touchstart event on a day in the category view. The event passed is the day object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}The touchstart event at a specific interval label in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}The touchstart event at a specific time in the day view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
]
}The touchstart event at a specific time in the category view. The event passed is the day & time object.
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
timeToY: (time: string | number | {hour: number, minute: number}, clamp: boolean = false): number | false
timeDelta: (time: string | number | {hour: number, minute: number}): number | false
minutesToPixels: (minutes: number): number
"week": [
{
date: string
time: string
year: number
month: number
day: number
hour: number
minute: number
weekday: number
hasDay: boolean
hasTime: boolean
past: boolean
present: boolean
future: boolean
}
],
category: string | null
}Checks for change in start and end dates. Updates and emits a change event if they have changed.
(): voidReturns the list of events seen on the current calendar where each element returned has the following properties:
- input: the event passed in the events prop.
- start: a CalendarTimestamp of the start timestamp parsed.
- startIdentifier: a number which represents the day the event starts on.
- startTimestampIdentifier: a number which represents the day and time the event starts on.
- end: a CalendarTimestamp of the end timestamp parsed.
- endIdentifier: a number which represents the day the event ends on.
- endTimestampIdentifier: a number which represents the day & time the event ends on.
- allDay: if this is an all-day event (has no time specified in the start/end on the event).
- index: the index of the event in the given array.
- category: the category of the event if the calendar type is category, otherwise false.
(): CalendarEventParsed[]Converts minutes to a pixel value on the y-axis for the day view. If the view is not day then -1 is returned.
(minutes: number): numberA generic function that moves the calendar next (if amount is positive) or previous (if amount is negative).
(amount: number = 1): voidTriggers the input event with a date that would progress the calendar to the next timespan. If the type is month it will return a day in the next month, if the type is 4day it will return a date 4 days after value/v-model, etc.
(amount: number = 1): voidA utility function which takes an event and returns the parsed version of that event.
(input: CalendarEvent, index: number = 0): CalendarEventParsedA utility function which takes timestamp input and returns a timestamp object.
(input: VTimestampInput, required?: false): CalendarTimestamp | nullTriggers the input event with a date that would progress the calendar to the previous timespan. If the type is month it will return a day in the previous month, if the type is 4day it will return a date 4 days before value/v-model, etc.
(amount: number = 1): voidScrolls the scrollable area in the day view to the given time. If the time is not in a valid format or if the calendar is not in the day view then false is returned.
(time: number | string | { hour: number, minute: number }): booleanConverts a time to a delta value for the day view. If the time is not in a valid format or if the calendar is not in the day view then false is returned. A delta value is typically between 0 and 1. If the time given is before the first interval then a negative number will be returned. If the timee given is after the last interval than a number greater than 1 will be returned.
(time: number | string | { hour: number, minute: number }): number | falseA utility function which takes timestamp and returns a Date.
(timestamp: CalendarTimestamp): DateConverts a time to a pixel value on the y-axis for the day view. If the time is not in a valid format or if the calendar is not in the day view then false is returned.
(time: number | string | { hour: number, minute: number }, clamp: boolean = true): number | falsestringUpdates now & today in the calendar, possibly updating the styles in the calendar.
(): void40px !default;0px 0px 3px 0px !default;right !default;10px !default;8px !default;-6px !default;4px !default;11px !default;3px 0px 0px 0px !default;$border-radius-root !default;1px !default;1px !default;12px !default;20px !default;10px !default;1px !default;12px !default;4px 0 0 0 !default;32px !default;36px !default;0px 0px 0px 0px !default;11px !default;0px 4px 0px 4px !default;24px !default;14.5px !default;Below is a collection of simple to complex examples.
This is an example of an event calendar with all-day and timed events with a type of week.
This is an example of calendar with content in each interval slot and a type of day.
Slots allow you to define the content for each day, time interval for the daily views, and various labels.
This is an example of a planner with additional event handlers and external components controlling the display of the calendar.
This is an example of an event calendar with a type of category that allows you to compare two schedules side-by-side.
This is an example of an calendar with a line for the current time.
This is an example of an event calendar where you can drag events, extend their length, and create events.
Ready for more? Continue reading with: