Event Display

You can customize the look of the labels and show additional content besides the event.title. There are two approaches you can take:

  • Only customize the content of the labels - For this you will want to use the calendarEventContent template. The color and positioning of the label will be handled by the calendar. The title and any other custom fields you want to show in the template is your responsibility.
  • Fully customize how the labels look (like in this example) - Use the calendarEvent template. All original event fields along with computed fields like isMultiDay, lastDay can be leveraged for constructing the template. With the calendarEvent template you will have full control over how the labels are styled including things like color, title and any custom fields.
Get started with this example

Demo

Loading the live demo

Preview in full screen

Control event label appearance in a event calendar — customize colors, timed-event dots, and custom fields beyond the title.

Code

View code on GitHub 
<script setup>
import {
  getJson,
  MbscEventcalendar,
  MbscToast,
  setOptions 
} from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

const myEvents = ref([])
const toastMessage = ref('')
const isToastOpen = ref(false)

const myView = {
  calendar: { labels: true }
}

function handleEventClick(args) {
  toastMessage.value = args.event.title
  isToastOpen.value = true
}

function handleToastClose() {
  isToastOpen.value = false
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/events/?vers=5',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar :clickToCreate="" :dragToCreate="" :dragToMove="" :dragToResize="" :eventDelete="" :view="myView" :data="myEvents" @event-click="handleEventClick">
    <template #calendarEvent="data">
      <div
        v-if="data.isMultiDay"
        :style="{ background: data.original.color, color: '#000' }"
        class="multi-day-event"
      >
        {{ data.original.title }}
      </div>
      <div
        v-if="!data.isMultiDay"
        class="single-day-event-dot"
        :style="{ background: data.original.color, color: '#000' }"
      ></div>
      <div v-if="!data.isMultiDay" class="single-day-event">
        {{ data.original.title }}
      </div>
    </template>
  </MbscEventcalendar>
  <MbscToast :message="toastMessage" :isOpen="isToastOpen" @close="handleToastClose" />
</template>

<style>
.single-day-event-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 7px;
}

.single-day-event {
  margin-left: 8px;
}

.multi-day-event {
  padding-left: 5px;
}
</style>

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.