---
title: "Vue Event calendar Event Display Example | Mobiscroll"
component: "Event calendar"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/eventcalendar/customize-label-look-and-feel"
---

# Event Display - Vue Event calendar demo

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

- [Live demo](https://demo.mobiscroll.com/vue/eventcalendar/customize-label-look-and-feel)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/calendar-view/customize-label-look-and-feel)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/calendar-view/customize-label-look-and-feel)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/eventcalendar/customize-label-look-and-feel.md), [jQuery](https://demo.mobiscroll.com/jquery/eventcalendar/customize-label-look-and-feel.md), [Angular](https://demo.mobiscroll.com/angular/eventcalendar/customize-label-look-and-feel.md), [React](https://demo.mobiscroll.com/react/eventcalendar/customize-label-look-and-feel.md)

## Description

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`](https://mobiscroll.com/docs/vue/eventcalendar/api#slot-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`](https://mobiscroll.com/docs/vue/eventcalendar/api#slot-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.

## What this demo shows

- A desktop month view event calendar with a full month grid layout.
- **Event labels** Days with events display labels directly inside the month cells.
- **Custom label rendering** The demo shows labels with a fully customized visual appearance: all day or multiple all day event labels have stron colors and the event title at the beggining of the event and timed events are marked with a small colored dot at the left and the event title next to it.
- **Overflow handling** The number of visible event labels depends on the available vertical space in the day cell. Additional events are moved into a popover and indicated by an `X more` label, where `X` represents the number of hidden events. Clicking it opens a popover that lists the remaining events for that day.
- **Event selection** Clicking an event label shows a toast with the event title at the bottom center part of the calendar.
- **Day cell states** Hovering a day cell highlights the day number with a gray background, while clicking the empty part of the cell selects the day and highlights the day number with a blue background.
- **Month navigation** The month view can be changed by clicking and dragging the calendar left or right.
- **Header controls** The header shows the current month and year on the left, with blue previous and next navigation arrows plus a `Today` button on the right.

## Best for

- **Branded calendar experiences** Products that need event labels to match a custom visual style instead of the default calendar appearance.
- **Category-based event display** Use cases where color and custom label design help users quickly distinguish event types, statuses, or teams.
- **Richer event summaries** Calendars that need to show more than the event title, such as custom fields or additional context inside the label.

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-themeVariant) - option
- [`labels`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-labels) - option
- [`clickToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-eventDelete) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`event-click`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onEventClick) - event
- [`close`](https://mobiscroll.com/docs/vue/notifications/toast#event-onClose) - event

## Code

### SFC JS

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

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

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="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :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>
```

### SFC TS

```vue
<script setup lang="ts">
import {
  getJson,
  MbscEventcalendar,
  MbscToast,
  setOptions
} from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscEventClickEvent } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myEvents = ref<MbscCalendarEvent[]>([])
const toastMessage = ref<string>('')
const isToastOpen = ref<boolean>(false)

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

function handleEventClick(args: MbscEventClickEvent) {
  toastMessage.value = args.event.title || ''
  isToastOpen.value = true
}

function handleToastClose() {
  isToastOpen.value = false
}

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

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true" :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>
```

## Implementation notes

- Set `view: { calendar: { labels: true } }` for a month grid with inline event labels.
- Use the full label renderer - `renderCalendarEvent` (Angular: `calendarEventTemplate`, Vue: `calendarEvent` slot) - to take complete control over each label's markup and styling. The render function receives a `data` object with computed fields alongside the original event; use `data.isMultiDay` to branch the template: multi-day events get a solid colored background using `data.original.color` with `data.original.title` as text; single-day events get a small colored dot followed by the title.
- For lighter customization where the calendar handles color and positioning automatically, use `renderCalendarEventContent` (Angular: `calendarEventContentTemplate`, Vue: `calendarEventContent` slot) instead - only the inner content is replaced.
- Handle `onEventClick` to show a `Toast` with `args.event.title`.
- Load events from a remote endpoint using `getJson` and assign them to `data`; for the imperative API, call `inst.setEvents(events)` in the callback.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Next: [Event Popover](https://demo.mobiscroll.com/vue/eventcalendar/customize-event-popover.md) - Customize how events appear in the day popover of a Vue event calendar — use full custom layouts or add fields like assignee, location, and participants.