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.

Setting the Displayed Week

By default, the Calendar displays the week based on today’s date.

Use the datetime attribute to control which week is shown. This attribute accepts any value supported by the JavaScript Date() constructor. In the example below, YYYY-MM-DD formatted strings are used.

The week displayed is the week that includes the provided date.

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

function formatDate(dateStr: string) {
const date = new Date(dateStr);
const day = date.getDate();
const month = date.toLocaleString('default', { month: 'long' });
const year = date.getFullYear();
return `${day} ${month} ${year}`;
}

const today = new Date().toISOString().split('T')[0];
const todayText = formatDate(today);
const datetime = ref(today);

</script>

<template>
  <VSelect v-model="datetime" label="Set calendar date" class="selector">
    <VOption :value="today" :text="todayText" text-secondary="Today"></VOption>
    <VOption value="1985-07-03" text="3 July 1985" text-secondary="Back to the Future is released"></VOption>
    <VOption value="1955-11-05" text="5 November 1955" text-secondary="Doc Brown invents time travel"></VOption>
    <VOption value="2015-10-21" text="21 October 2015" text-secondary="Doc travels to the future"></VOption>
  </VSelect>

    <VCalendar :datetime="datetime" class="calendar"></VCalendar>

</template>

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

.selector {
  inline-size: 200px;
  margin-block-end: 16px;
}
</style>

<vwc-select label="Set calendar date" class="selector">
  <vwc-option value="" selected text-secondary="Today"></vwc-option>
  <vwc-option value="1985-07-03" text="3 July 1985" text-secondary="Back to the Future is released"></vwc-option>
  <vwc-option value="1955-11-05" text="5 November 1955" text-secondary="Doc Brown invents time travel"></vwc-option>
  <vwc-option value="2015-10-21" text="21 October 2015" text-secondary="Doc travels to the future"></vwc-option>
</vwc-select>

<vwc-calendar class="calendar"></vwc-calendar>

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

  .selector {
    inline-size: 200px;
    margin-block-end: 16px;
  }
</style>

<script>
  const selector = document.querySelector('.selector');
  const calendar = document.querySelector('.calendar');
  const todayOption = document.querySelector('vwc-option[value=""]');
  setTodayOption();

  selector.addEventListener('change', (e) => calendar.setAttribute('datetime', e.detail.value));

  function formatDate(dateStr) {
    const date = new Date(dateStr);
    const day = date.getDate();
    const month = date.toLocaleString('default', { month: 'long' });
    const year = date.getFullYear();
    return `${day} ${month} ${year}`;
  }

  function setTodayOption() {
    const today = new Date().toISOString().split('T')[0];
    const todayStr = formatDate(today);
    todayOption.setAttribute('text', todayStr);
    todayOption.setAttribute('value', today);
  }
</script>

Sticky Mode

The sticky-mode attribute controls which parts of the Calendar remain fixed when scrolling:

all → keeps both time column and day header sticky (default)
header → keeps the day headers sticky
column → keeps the time column sticky
none → nothing is sticky

Sticky behavior requires the Calendar (or it’s container) to have a defined width and height. Without these, scrolling won’t occur and elements won’t stick.

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

const stickyMode = ref('all');

</script>

<template>
  <VSelect v-model="stickyMode" label="Select sticky mode" class="selector">
    <VOption value="all" text="All" text-secondary="Keeps both time column and day header sticky"></VOption>
    <VOption value="header" text="Header" text-secondary="Keeps the day headers sticky"></VOption>
    <VOption value="column" text="Column" text-secondary="Keeps the time column sticky"></VOption>
    <VOption value="none" text="None" text-secondary="Nothing is sticky"></VOption>
  </VSelect>

    <VCalendar :sticky-mode="stickyMode" class="calendar"></VCalendar>

</template>

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

.calendar[sticky-mode='none'] {
  max-inline-size: auto;
  max-block-size: auto;
}

.selector {
  inline-size: 200px;
  margin-block-end: 16px;
}
</style>

<vwc-select label="Select sticky mode" class="selector">
  <vwc-option value="all" selected text="All" text-secondary="Keeps both time column and day header sticky"></vwc-option>
  <vwc-option value="header" text="Header" text-secondary="Keeps the day headers sticky"></vwc-option>
  <vwc-option value="column" text="Column" text-secondary="Keeps the time column sticky"></vwc-option>
  <vwc-option value="none" text="None" text-secondary="Nothing is sticky"></vwc-option>
</vwc-select>

<vwc-calendar class="calendar"></vwc-calendar>

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

  .calendar[sticky-mode='none'] {
    max-inline-size: auto;
    max-block-size: auto;
  }

  .selector {
    inline-size: 200px;
    margin-block-end: 16px;
  }
</style>

<script>
  const selector = document.querySelector('.selector');
  const calendar = document.querySelector('.calendar');

  selector.addEventListener('change', (e) => calendar.setAttribute('sticky-mode', e.detail.value));
</script>

Modifying the Week View’s Start Day

By default, the week view will start on Monday. Using the start-day attribute this can be changed to Sunday as in the example below.

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

<template>
  <VCalendar class="calendar" start-day="sunday"></VCalendar>
</template>

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

Displaying Times in 12 Hour Format

By default times are displayed using a 24 hour format. This can be changed to a 12 hour format using the hour12 attribute.

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

<template>
  <VCalendar class="calendar" hour12></VCalendar>
</template>

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

Locales

The locales attribute lets you specify a locale string or an array of locale strings to control the language and regional formatting of the Calendar.

If multiple locales are provided, list them in descending order of priority, with the first being the preferred locale.
If omitted, the Calendar defaults to the JavaScript runtime’s locale.
Locale strings must conform to BCP 47 standards. Eg. en-US or en-US, he-IL.

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

<template>
  <VCalendar class="calendar" locales="he-IL" start-day="sunday" style="direction: rtl"></VCalendar>
</template>

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

<vwc-calendar class="calendar" locales="he-IL" start-day="sunday" style="direction: rtl"></vwc-calendar>

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