---
title: "Vue Scheduler Event Data Structure Example | Mobiscroll"
component: "Scheduler"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/scheduler/event-data-structure"
---

# Event Data Structure - Vue Scheduler demo

Define event data in the Vue Scheduler — set base fields, recurring rules, resource links, drag/resize controls, and buffer times. For Vue and Nuxt.

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

## Description

The event data structure for the scheduler is straightforward with a couple of base properties that the component understands and uses to render the UI. Besides the base properties you can add any custom property, like location, description ...

- `id` - A unique ID for the event. If not specified a unique id will be generated
- `title` - Defines the event text. This can be plaintext or HTML
- `tooltip` - Defines the text for the tooltip which appears on mouse hover. If not specified, it will show the title and the start/end times of the event.
- `color` - Defines the event color
- `start` - Sets the start date and time for the event. It can be a js date object, ISO date string or moment.js object. [Learn about date formats](https://demo.mobiscroll.com/vue/scheduler/date-object-ISO-8601-moment)
- `end` - Sets the end date and time for the event. The same formats are supported as for `start`
- `allDay` - Configures the event as a full-day event
- `recurring` - Configures the recurring rules for the event. [Learn about recurring events](https://demo.mobiscroll.com/vue/scheduler/recurring-events)
- `recurringException` - Represents the exceptions of a recurring event, when specific dates need to be skipped from the rule.
- `recurringExceptionRule` - Represents the exception rule of a recurring event, when recurring dates need to be skipped from the rule.
- `resource` - Links the event to one or more resources. Expects a list of IDs from the [`resources` array](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources)
- `timezone` - The timezone where the event takes place. If specified, it takes precedence over the calendar's specified [`dataTimezone`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dataTimezone).
- `dragBetweenResources` - Specifies whether the event is movable across resources. If set to `false` has precedence over `eventDragBetweenResources` property in [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) and the [`dragBetweenResources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragBetweenResources) option of the calendar.
- `dragInTime` - Specifies whether the event is movable in time. If set to `false` has precedence over `eventDragInTime` property in [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) and the [`dragInTime`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragInTime) option of the calendar.
- `resize` - Specifies whether the event is resizable. If set to `false` has precedence over `eventResize` property in [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) and the [`dragToResize`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-dragToResize) option of the calendar.
- `overlap` - Specifies whether overlap is allowed on the event. If set to `false` has precedence over `eventOverlap` property in [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) and the [`eventOverlap`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-eventOverlap) option of the calendar.
- `editable` - Denotes if the event is editable. If set `false`, the event cannot be dragged, resized or deleted even if globally enabled
- `cssClass` - A custom css class for the event. Useful for quick styling adjustments of the event container.
- `bufferBefore` - Defines a buffer time in minutes that will be rendered before the start of the event. This buffer area can help you visualise delays or added minutes for tasks. For example travel time for meetings/appointments, check in before a flight.
- `bufferAfter` - Defines a buffer time in minutes that will be rendered after the end of the event. This buffer area can help you visualise delays or added minutes for tasks. For example travel time after meetings/appointments, check out after flights, inspection, cleaning after certain tasks.
- `order` - Specifies the order of the event in the event array. Has precedence over the default ordering rules.

## What this demo shows

- A desktop daily scheduler layout with a fixed week strip at the top, a fixed all-day event row below it, and a scrollable time grid for the selected day.
- **Code example** The left-side code snippet shows an event definition with the event properties used by the scheduler.
- **Add event action** A button below the code snippet lets users add a new event to the scheduler from the event data shown in the code example.
- **Add event feedback** Hovering the button highlights it, and clicking it adds the event to the scheduler and shows a confirmation toast at the bottom center of the scheduler.
- **Header navigation** The month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between dates and jump back to the current day.
- **Week view** The fixed week strip below the header shows the surrounding dates for quick day switching. Dates highlight on hover, and the selected day is marked with a blue circle.
- **All-day events** All-day events are displayed in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler below the all-day row scrolls vertically through the hours of the selected day.
- **Hover feedback** Hovering the time grid shows a time indicator that follows the pointer in 15-minute increments.
- **Event rendering** Events appear as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title. Also shows buffer times before and after the event.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Event interactions** Hovering an event highlights it and shows resize and drag handles, indicating that events can be resized or repositioned.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.
- **Event selection** Clicking an event selects and highlights it.
- **Current time** A blue line across the scheduler indicates the current time.

## Best for

- **Daily team scheduling** Managing meetings, check-ins, and work blocks in a day-based scheduler with quick access to nearby dates.
- **Workforce and shift planning** Viewing all-day and timed items together when teams need to coordinate daily schedules across a structured timeline.
- **Event-dense planning interfaces** Helping users spot categories, overlaps, and gaps quickly through color-coded event blocks.

## Tutorial

```js
{
    // base properties
    title: 'Product planning',
    color: '#56ca70',
    start: '2026-10-22T07:00',
    end: '2026-10-22T08:00',
    bufferBefore: 20,
    bufferAfter: 30,
    // add any property you'd like
    busy: true,
    description: 'Weekly meeting with team',
    location: 'Office',
}
```

Now that you know how the event object is structured you can [easily load an array of events](https://demo.mobiscroll.com/vue/scheduler/load-events-on-demand) into the scheduler and [perform CRUD operations](https://demo.mobiscroll.com/vue/scheduler/add-delete-event).

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

## Code

### SFC JS

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

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

const now = new Date()
const calInst = ref(null)
const isToastOpen = ref(false)

const myEvents = ref([
  {
    start: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 13),
    end: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 14),
    title: 'General orientation',
    color: '#35bb5a',
    bufferBefore: 20,
    bufferAfter: 30
  }
])

const myView = { scheduler: { type: 'day' } }

function addEvent() {
  const newEvent = {
    // Base properties
    title: 'Product planning',
    color: '#56ca70',
    start: new Date(2018, 11, 21, 13),
    end: new Date(2018, 11, 21, 14),
    bufferBefore: 20,
    bufferAfter: 30,
    // Add any property you'd like
    busy: true,
    description: 'Weekly meeting with team',
    location: 'Office'
  }

  myEvents.value = [...myEvents.value, newEvent]
  isToastOpen.value = true
  calInst.value.instance.navigateToEvent(newEvent)
}
</script>

<template>
  <MbscPage cssClass="mds-full-height">
    <div className="mds-full-height mbsc-flex-col">
      <div class="mbsc-flex-none">
        <MbscButton startIcon="plus" @click="addEvent()">Add event to calendar</MbscButton>
      </div>
      <div className="mds-overflow-hidden mbsc-flex-1-1">
        <MbscEventcalendar ref="calInst" :data="myEvents" :view="myView" />
      </div>
    </div>
    <MbscToast message="Event added" :isOpen="isToastOpen" @close="isToastOpen = false" />
  </MbscPage>
</template>

<style>
.mds-full-height {
  height: 100%;
}

.mds-overflow-hidden {
  overflow: hidden;
}
</style>
```

### SFC TS

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

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

const now = new Date()
const calInst = ref<typeof MbscEventcalendar>()
const isToastOpen = ref(false)

const myEvents = ref<MbscCalendarEvent[]>([
  {
    start: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 13),
    end: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 14),
    title: 'General orientation',
    color: '#35bb5a',
    bufferBefore: 20,
    bufferAfter: 30
  }
])

const myView: MbscEventcalendarView = { scheduler: { type: 'day' } }

function addEvent() {
  const newEvent: MbscCalendarEvent = {
    // Base properties
    title: 'Product planning',
    color: '#56ca70',
    start: new Date(2018, 11, 21, 13),
    end: new Date(2018, 11, 21, 14),
    bufferBefore: 20,
    bufferAfter: 30,
    // Add any property you'd like
    busy: true,
    description: 'Weekly meeting with team',
    location: 'Office'
  }

  myEvents.value = [...myEvents.value, newEvent]
  isToastOpen.value = true
  calInst.value?.instance.navigateToEvent(newEvent)
}
</script>

<template>
  <MbscPage cssClass="mds-full-height">
    <div className="mds-full-height mbsc-flex-col">
      <div class="mbsc-flex-none">
        <MbscButton startIcon="plus" @click="addEvent()">Add event to calendar</MbscButton>
      </div>
      <div className="mds-overflow-hidden mbsc-flex-1-1">
        <MbscEventcalendar ref="calInst" :data="myEvents" :view="myView" />
      </div>
    </div>
    <MbscToast message="Event added" :isOpen="isToastOpen" @close="isToastOpen = false" />
  </MbscPage>
</template>

<style>
.mds-full-height {
  height: 100%;
}

.mds-overflow-hidden {
  overflow: hidden;
}
</style>
```

## Implementation notes

- Use `view: { scheduler: { type: 'day' } }`.
- Pre-load one event with `bufferBefore: 20` and `bufferAfter: 30` (values in minutes). The buffer zones render as shaded areas before the event start and after the event end.
- A new event can be built with base properties (`title`, `color`, `start`, `end`, `bufferBefore: 20`, `bufferAfter: 30`) and custom fields (`busy: true`, `description`, `location`), then added to the events array; for the imperative API, call `inst.addEvent(newEvent)`. Call `inst.navigateToEvent(newEvent)` to scroll the view to the new event.

## 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: [Date Input Formats](https://demo.mobiscroll.com/vue/scheduler/date-object-ISO-8601-moment.md) - Use JS date objects, ISO 8601 strings, or Moment.js objects as date input in the Vue Scheduler for events, colors, and labels.