Calendar Event

The Calendar Event component displays scheduled items within the weekly view of the Calendar component. It supports clickable, interactive events with customizable times and colors.

Usage

import { VCalendar, VCalendarEvent } from '@vonage/vivid-vue';

import { registerCalendar, registerCalendarEvent } from '@vonage/vivid';

registerCalendar('your-prefix');
registerCalendarEvent('your-prefix');

API Reference

Properties

Property	Type	Description
appearance	`'filled' \| 'duotone' \| 'subtle'`	Sets the event's appearance
connotation	`'alert' \| 'accent' \| 'cta' \| 'success' \| 'warning' \| 'information' \| 'announcement'`	Sets the first day of the week to display
description	`string`	Sets the event description
duration	`number`	Sets the event duration (e.g. `2` = 2 hours)
heading	`string`	Sets the event heading
overlapCount	`number`	Sets the stacking context of the event when it overlaps with another
start	`number`	Sets the event start time (e.g. `14` = 2pm)

Property	Type	Description
appearance	`'filled' \| 'duotone' \| 'subtle'`	Sets the event's appearance
connotation	`'alert' \| 'accent' \| 'cta' \| 'success' \| 'warning' \| 'information' \| 'announcement'`	Sets the first day of the week to display
description	`string`	Sets the event description
duration	`number`	Sets the event duration (e.g. `2` = 2 hours)
heading	`string`	Sets the event heading
overlap-count	`number`	Sets the stacking context of the event when it overlaps with another
start	`number`	Sets the event start time (e.g. `14` = 2pm)

Events

Event	Type	Description
blur	`FocusEvent`	Fires when the element loses focus.
click	`MouseEvent`	Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus	`FocusEvent`	Fires when the element receives focus.
input	`Event`	Fires when the value of an element has been changed.
keydown	`KeyboardEvent`	Fires when a key is pressed.
keyup	`KeyboardEvent`	Fires when a key is released.

Name	Type	Description
blur	`FocusEvent`	Fires when the element loses focus.
click	`MouseEvent`	Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focus	`FocusEvent`	Fires when the element receives focus.
input	`Event`	Fires when the value of an element has been changed.
keydown	`KeyboardEvent`	Fires when a key is pressed.
keyup	`KeyboardEvent`	Fires when a key is released.