---
title: "Vue Event calendar Inline Events Example | Mobiscroll"
component: "Event calendar"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/eventcalendar/load-inline-data"
---

# Inline Events - Vue Event calendar demo

Populate a Vue event calendar with events using an inline data array — month view with event labels and overflow popover. For Vue and Nuxt.

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

## Description

What is an event calendar without any events in it? To populate it with events all you have to do is pass the event array to the [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) option.

In a real-world scenario you would probably [load the events from a remote resource](https://demo.mobiscroll.com/vue/eventcalendar/load-events-from-remote-api) or event better, [load them on demand](https://demo.mobiscroll.com/vue/eventcalendar/load-events-on-demand). However the point of this example is to understand how easy it is to add events to the event calendar.

**Do you want to learn about the event data sctructure?** [See how the event object is built →](https://demo.mobiscroll.com/vue/eventcalendar/event-data-structure)

## What this demo shows

- A month-view event calendar is displayed inside a smartphone frame.
- **Month grid** Days with events display event labels directly in the month cells with different visual styles based on the event type or event data.
- **Overflow handling** The number of visible event labels depends on the available height in each day cell. Additional events are collapsed behind an `X more` link.
- **Popover** Clicking the `X more` link opens a popover that shows the hidden events for that day.
- **Event interaction** Hovering over or selecting an event label highlights it.
- **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** You can move between months by clicking and dragging the calendar left or right.
- **Calendar header** The header shows the current month and year on the left, and blue month navigation arrows with a `Today` button (for jumping back to the current date) between them on the right.

## Best for

- **Monthly event overview** Showing a full month of events in a compact calendar layout.

## 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
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option

## Code

### SFC JS

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

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

const now = new Date()

const myEvents = ref([
  {
    start: '2026-10-23T09:00',
    end: '2026-10-26T18:00',
    title: 'Business of Software Conference',
    color: '#ff6d42'
  },
  {
    start: '2026-10-23T13:00',
    end: '2026-10-24T21:00',
    title: 'Friends binge marathon',
    color: '#7bde83'
  },
  {
    start: '2026-10-30T13:00',
    end: '2026-10-31T21:00',
    title: 'Friends binge marathon',
    color: '#7bde83'
  },
  {
    start: '2026-10-23T08:00',
    end: '2026-10-23T09:00',
    title: 'Product team mtg.',
    color: '#913aa7'
  },
  {
    start: '2026-10-24T07:00',
    end: '2026-10-24T08:00',
    title: 'Green box to post office',
    color: '#6e7f29'
  },
  {
    start: '2026-10-22T08:45',
    end: '2026-10-22T10:00',
    title: 'Quick mtg. with Martin',
    color: '#de3d83'
  },
  {
    start: '2026-10-08T09:30',
    end: '2026-10-08T10:30',
    title: 'Product team mtg.',
    color: '#f67944'
  },
  {
    start: '2026-10-08T11:00',
    end: '2026-10-08T11:45',
    title: 'Stakeholder mtg.',
    color: '#a144f6'
  },
  {
    start: '2026-10-08T13:00',
    end: '2026-10-08T13:45',
    title: "Lunch @ Butcher's",
    color: '#00aabb'
  },
  {
    start: '2026-10-08T15:00',
    end: '2026-10-08T16:00',
    title: 'General orientation',
    color: '#a71111'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: now.getMonth() + 1,
      day: 14
    },
    allDay: true,
    title: 'Dexter BD',
    color: '#37bbe4'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: now.getMonth() + 1,
      day: 25
    },
    allDay: true,
    title: 'Luke BD',
    color: '#37bbe4'
  },
  {
    recurring: {
      repeat: 'weekly',
      weekDays: 'WE'
    },
    allDay: true,
    title: 'Employment (Semi-weekly)',
    color: '#228c73'
  },
  {
    start: '2026-10-10T00:00',
    end: '2026-10-15T00:00',
    allDay: true,
    title: 'Sam OFF',
    color: '#ca4747'
  },
  {
    start: '2026-10-18T00:00',
    end: '2026-10-29T00:00',
    allDay: true,
    title: 'Europe tour',
    color: '#56ca70'
  },
  {
    start: '2026-02-07T00:00',
    end: '2026-02-25T00:00',
    allDay: true,
    title: 'Dean OFF',
    color: '#99ff33'
  },
  {
    start: '2026-03-05T00:00',
    end: '2026-03-14T00:00',
    allDay: true,
    title: 'Mike OFF',
    color: '#e7b300'
  },
  {
    start: '2026-05-07T00:00',
    end: '2026-05-16T00:00',
    allDay: true,
    title: 'John OFF',
    color: '#669900'
  },
  {
    start: '2026-06-01T00:00',
    end: '2026-06-11T00:00',
    allDay: true,
    title: 'Carol OFF',
    color: '#6699ff'
  },
  {
    start: '2026-07-02T00:00',
    end: '2026-07-17T00:00',
    allDay: true,
    title: 'Jason OFF',
    color: '#cc9900'
  },
  {
    start: '2026-08-06T00:00',
    end: '2026-08-14T00:00',
    allDay: true,
    title: 'Ashley OFF',
    color: '#339966'
  },
  {
    start: '2026-09-10T00:00',
    end: '2026-09-20T00:00',
    allDay: true,
    title: 'Marisol OFF',
    color: '#8701a9'
  },
  {
    start: '2026-10-01T00:00',
    end: '2026-10-12T00:00',
    allDay: true,
    title: 'Sharon OFF',
    color: '#cc6699'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 12,
      day: 25
    },
    allDay: true,
    title: 'Christmas Day',
    color: '#ff0066'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 1,
      day: 1
    },
    allDay: true,
    title: "New Year's day",
    color: '#99ccff'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 4,
      day: 1
    },
    allDay: true,
    title: "April Fool's Day",
    color: '#ff6666'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 720 for the third quarter',
    color: '#147ea6'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 730 and pay tax on wagers accepted during September',
    color: '#a73a4e'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 2290 and pay the tax for vehicles first used during September',
    color: '#218e0d'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 941 for the third quarter',
    color: '#a67914'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'Deposit FUTA owed through Sep if more than $500',
    color: '#3c0707'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'Deposit payroll tax for payments on Nov 21-24 if the semiweekly deposit rule applies',
    color: '#14a618'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'File Form 730 and pay tax on wagers accepted during October',
    color: '#722ac1'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'File Form 2290 and pay the tax for vehicles first used during October',
    color: '#256069'
  }
])

const myView = {
  calendar: { labels: true }
}
</script>

<template>
  <MbscEventcalendar :data="myEvents" :view="myView" />
</template>
```

### SFC TS

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

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

const now: Date = new Date()

const myEvents = ref<MbscCalendarEvent[]>([
  {
    start: '2026-10-23T09:00',
    end: '2026-10-26T18:00',
    title: 'Business of Software Conference',
    color: '#ff6d42'
  },
  {
    start: '2026-10-23T13:00',
    end: '2026-10-24T21:00',
    title: 'Friends binge marathon',
    color: '#7bde83'
  },
  {
    start: '2026-10-30T13:00',
    end: '2026-10-31T21:00',
    title: 'Friends binge marathon',
    color: '#7bde83'
  },
  {
    start: '2026-10-23T08:00',
    end: '2026-10-23T09:00',
    title: 'Product team mtg.',
    color: '#913aa7'
  },
  {
    start: '2026-10-24T07:00',
    end: '2026-10-24T08:00',
    title: 'Green box to post office',
    color: '#6e7f29'
  },
  {
    start: '2026-10-22T08:45',
    end: '2026-10-22T10:00',
    title: 'Quick mtg. with Martin',
    color: '#de3d83'
  },
  {
    start: '2026-10-08T09:30',
    end: '2026-10-08T10:30',
    title: 'Product team mtg.',
    color: '#f67944'
  },
  {
    start: '2026-10-08T11:00',
    end: '2026-10-08T11:45',
    title: 'Stakeholder mtg.',
    color: '#a144f6'
  },
  {
    start: '2026-10-08T13:00',
    end: '2026-10-08T13:45',
    title: "Lunch @ Butcher's",
    color: '#00aabb'
  },
  {
    start: '2026-10-08T15:00',
    end: '2026-10-08T16:00',
    title: 'General orientation',
    color: '#a71111'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: now.getMonth() + 1,
      day: 14
    },
    allDay: true,
    title: 'Dexter BD',
    color: '#37bbe4'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: now.getMonth() + 1,
      day: 25
    },
    allDay: true,
    title: 'Luke BD',
    color: '#37bbe4'
  },
  {
    recurring: {
      repeat: 'weekly',
      weekDays: 'WE'
    },
    allDay: true,
    title: 'Employment (Semi-weekly)',
    color: '#228c73'
  },
  {
    start: '2026-10-10T00:00',
    end: '2026-10-15T00:00',
    allDay: true,
    title: 'Sam OFF',
    color: '#ca4747'
  },
  {
    start: '2026-10-18T00:00',
    end: '2026-10-29T00:00',
    allDay: true,
    title: 'Europe tour',
    color: '#56ca70'
  },
  {
    start: '2026-02-07T00:00',
    end: '2026-02-25T00:00',
    allDay: true,
    title: 'Dean OFF',
    color: '#99ff33'
  },
  {
    start: '2026-03-05T00:00',
    end: '2026-03-14T00:00',
    allDay: true,
    title: 'Mike OFF',
    color: '#e7b300'
  },
  {
    start: '2026-05-07T00:00',
    end: '2026-05-16T00:00',
    allDay: true,
    title: 'John OFF',
    color: '#669900'
  },
  {
    start: '2026-06-01T00:00',
    end: '2026-06-11T00:00',
    allDay: true,
    title: 'Carol OFF',
    color: '#6699ff'
  },
  {
    start: '2026-07-02T00:00',
    end: '2026-07-17T00:00',
    allDay: true,
    title: 'Jason OFF',
    color: '#cc9900'
  },
  {
    start: '2026-08-06T00:00',
    end: '2026-08-14T00:00',
    allDay: true,
    title: 'Ashley OFF',
    color: '#339966'
  },
  {
    start: '2026-09-10T00:00',
    end: '2026-09-20T00:00',
    allDay: true,
    title: 'Marisol OFF',
    color: '#8701a9'
  },
  {
    start: '2026-10-01T00:00',
    end: '2026-10-12T00:00',
    allDay: true,
    title: 'Sharon OFF',
    color: '#cc6699'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 12,
      day: 25
    },
    allDay: true,
    title: 'Christmas Day',
    color: '#ff0066'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 1,
      day: 1
    },
    allDay: true,
    title: "New Year's day",
    color: '#99ccff'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 4,
      day: 1
    },
    allDay: true,
    title: "April Fool's Day",
    color: '#ff6666'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 720 for the third quarter',
    color: '#147ea6'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 730 and pay tax on wagers accepted during September',
    color: '#a73a4e'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 2290 and pay the tax for vehicles first used during September',
    color: '#218e0d'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 941 for the third quarter',
    color: '#a67914'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'Deposit FUTA owed through Sep if more than $500',
    color: '#3c0707'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'Deposit payroll tax for payments on Nov 21-24 if the semiweekly deposit rule applies',
    color: '#14a618'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'File Form 730 and pay tax on wagers accepted during October',
    color: '#722ac1'
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'File Form 2290 and pay the tax for vehicles first used during October',
    color: '#256069'
  }
])

const myView: MbscEventcalendarView = {
  calendar: { labels: true }
}
</script>

<template>
  <MbscEventcalendar :data="myEvents" :view="myView" />
</template>
```

## Implementation notes

- Use `view: { calendar: { labels: true } }`.
- Define a static event array and pass it directly to the `data` prop/option - no remote fetch. Include a variety of event shapes: timed events (`start`, `end`, `title`, `color`), multi-day events, all-day events (`allDay: true`), and recurring events (e.g., `{ recurring: { repeat: 'yearly', month: 12, day: 25 }, allDay: true, title: 'Christmas Day', color: '#ff0066' }`). Use relative date helpers (`dyndatetime` or equivalent) so events always land near the current month regardless of when the demo is opened.
- No `data` prop change or async loading is needed after mount - the event array is fully static. For JS/jQuery, pass the array as the `data` option directly in the `eventcalendar()` init call.

## 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: [Load Events from API](https://demo.mobiscroll.com/vue/eventcalendar/load-events-from-remote-api.md) - Load events into a Vue event calendar from a remote API — pass event data in the correct format to populate the calendar view.