Calendar Event

<script setup lang="ts">
import { VCalendar, VCalendarEvent } from '@vonage/vivid-api-vue';
</script>
<template>
  <VCalendar class="calendar">
    <template #day-0>
      <VCalendarEvent heading="Enchantment under the sea dance" start="9" duration="2" />
    </template>
  </VCalendar>
</template>

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

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

<your-prefix-calendar class="calendar">
  <your-prefix-calendar-event heading="Enchantment under the sea dance" slot="day-0" start="9" duration="2"></your-prefix-calendar-event>
</your-prefix-calendar>

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