Calendar

The Calendar component displays events in a visual date grid in a week views, allowing users to view and interact with the displayed events.

Usage

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

<script setup lang="ts">
import { VCalendar } from '@vonage/vivid-api-vue';
</script>
<template>
  <VCalendar class="calendar" />
</template>

<style scoped>
.calendar {
  max-inline-size: 100%;
  max-block-size: 250px;
}
</style>

import { registerCalendar } from '@vonage/vivid-api';

registerCalendar('your-prefix');

<script type="module">
  import { registerCalendar } from '@vonage/vivid-api';
  registerCalendar('your-prefix');
</script>

<your-prefix-calendar class="calendar"></your-prefix-calendar>

<style>
  .calendar {
    max-inline-size: 100%;
    max-block-size: 250px;
  }
</style>

CSS Variables

Calendar Column / Header Background Color

When using sticky-mode (header, column, or both), set the CSS variable --calendar-column-background-color to define the background color of sticky elements.

If not specified, it defaults to --vvd-color-canvas.

<script setup lang="ts">
import { VCalendar } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="wrapper">
    <VCalendar sticky-mode="all"></VCalendar>
  </div>
</template>

<style scoped>
.wrapper {
  --calendar-header-background-color: var(--vvd-color-neutral-100);
  --calendar-column-background-color: var(--vvd-color-neutral-100);

  display: block;
  max-inline-size: 100%;
  max-block-size: 550px;
  background-color: var(--vvd-color-neutral-100);
  padding: 16px;
}
</style>

<div class="wrapper">
  <vwc-calendar sticky-mode="all"></vwc-calendar>
</div>

<style>
  .wrapper {
    --calendar-header-background-color: var(--vvd-color-neutral-100);
    --calendar-column-background-color: var(--vvd-color-neutral-100);

    display: block;
    max-inline-size: 100%;
    max-block-size: 550px;
    background-color: var(--vvd-color-neutral-100);
    padding: 16px;
  }
</style>

Slots

Day[0-6] Slots

Each day in the Calendar has a slot assigned to it. Use the Calendar Event component in these slots to arrange events around the weekly view.

<script setup lang="ts">
import { VCalendar, VCalendarEvent } from '@vonage/vivid-api-vue';
</script>

<template>
  <VCalendar class="calendar">
    <VCalendarEvent slot="day-0" start="10" duration="1" heading="Backlog refinement"></VCalendarEvent>
    <VCalendarEvent slot="day-0" start="12" duration="1" heading="Gym Workout" connotation="cta"></VCalendarEvent>
    <VCalendarEvent slot="day-1" start="10" duration="0.5" heading="Daily stand up" appearance="subtle"></VCalendarEvent>
    <VCalendarEvent slot="day-2" start="10" duration="0.5" heading="Daily stand up" appearance="subtle"></VCalendarEvent>
    <VCalendarEvent slot="day-2" start="12" duration="1" heading="Swim" connotation="cta"></VCalendarEvent>
    <VCalendarEvent slot="day-3" start="10" duration="0.5" heading="Daily stand up" appearance="subtle"></VCalendarEvent>
    <VCalendarEvent slot="day-4" start="10" duration="0.5" heading="Daily stand up" appearance="subtle"></VCalendarEvent>
    <VCalendarEvent slot="day-4" start="14" duration="0.75" heading="Sprint demo"></VCalendarEvent>
    <VCalendarEvent slot="day-4" start="12" duration="1" heading="Gym Workout" connotation="cta"></VCalendarEvent>
    <VCalendarEvent slot="day-5" start="9" duration="1" heading="Park run" connotation="cta"></VCalendarEvent>
  </VCalendar>
</template>

<style scoped>
.calendar {
  max-inline-size: 100%;
  max-block-size: 550px;
}
</style>

<vwc-calendar class="calendar">
  <vwc-calendar-event slot="day-0" start="10" duration="1" heading="Backlog refinement"></vwc-calendar-event>
  <vwc-calendar-event slot="day-0" start="12" duration="1" heading="Gym Workout" connotation="cta"></vwc-calendar-event>
  <vwc-calendar-event slot="day-1" start="10" duration="0.5" heading="Daily stand up" appearance="subtle"></vwc-calendar-event>
  <vwc-calendar-event slot="day-2" start="10" duration="0.5" heading="Daily stand up" appearance="subtle"></vwc-calendar-event>
  <vwc-calendar-event slot="day-2" start="12" duration="1" heading="Swim" connotation="cta"></vwc-calendar-event>
  <vwc-calendar-event slot="day-3" start="10" duration="0.5" heading="Daily stand up" appearance="subtle"></vwc-calendar-event>
  <vwc-calendar-event slot="day-4" start="10" duration="0.5" heading="Daily stand up" appearance="subtle"></vwc-calendar-event>
  <vwc-calendar-event slot="day-4" start="14" duration="0.75" heading="Sprint demo"></vwc-calendar-event>
  <vwc-calendar-event slot="day-4" start="12" duration="1" heading="Gym Workout" connotation="cta"></vwc-calendar-event>
  <vwc-calendar-event slot="day-5" start="9" duration="1" heading="Park run" connotation="cta"></vwc-calendar-event>
</vwc-calendar>

<style>
  .calendar {
    max-inline-size: 100%;
    max-block-size: 550px;
  }
</style>

API Reference

calendar

Properties

Property	Type	Description
datetime	`string \| Date`	Sets the week to display
hour12	`boolean`	Displays a time in 12 hour format
locales	`string \| string[]`	Sets the locale to be displayed
startDay	`'sunday' \| 'monday'`	Sets the first day of the week to display
stickyMode	`'none' \| 'header' \| 'column' \| 'all'`	Set the `sticky-mode` attribute

Property	Type	Description
datetime	`string \| Date`	Sets the week to display
hour12	`boolean`	Displays a time in 12 hour format
locales	`string \| string[]`	Sets the locale to be displayed
start-day	`'sunday' \| 'monday'`	Sets the first day of the week to display
sticky-mode	`'none' \| 'header' \| 'column' \| 'all'`	Set the `sticky-mode` attribute

Slots

Name	Description
day-0	Assign elements to corresponding day column using this slot.
day-1	Assign elements to corresponding day column using this slot.
day-2	Assign elements to corresponding day column using this slot.
day-3	Assign elements to corresponding day column using this slot.
day-4	Assign elements to corresponding day column using this slot.
day-5	Assign elements to corresponding day column using this slot.
day-6	Assign elements to corresponding day column using this slot.
default	Default slot.

Name	Description
day-0	Assign elements to corresponding day column using this slot.
day-1	Assign elements to corresponding day column using this slot.
day-2	Assign elements to corresponding day column using this slot.
day-3	Assign elements to corresponding day column using this slot.
day-4	Assign elements to corresponding day column using this slot.
day-5	Assign elements to corresponding day column using this slot.
day-6	Assign elements to corresponding day column using this slot.
default	Default slot.

calendar-event

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)