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

# Load Inline Events - Vue Timeline demo

Add events to a Vue Timeline by passing an inline event array — see how the event object is structured. For Vue and Nuxt.

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

## Description

What is a timeline 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/timeline/load-events-from-remote-api) or event better, [load them on demand](https://demo.mobiscroll.com/vue/timeline/load-events-on-demand). However the point of this example is to understand how easy it is to add events to the timeline.

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

## What this demo shows

- A desktop daily timeline where hours are arranged horizontally and resource arranged vertically on the left.
- **Header navigation** The month and year label opens date navigation, while the previous and next arrows move between days and the Today button returns to the current date.
- **Day view** The strip below the header shows the selected days, with the current date highlighted. The timeline displays hourly columns from 12 AM to 12 PM.
- **Resources** Multiple resources are shown as separate timeline rows.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** 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 below the title.
- **Date positioning** Events are positioned by their assigned resource and exact date range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.

## Best for

- **Business schedules** Daily meeting-heavy calendars for product teams, leadership groups, internal planning, and other workdays with overlapping appointments.
- **Operational scheduling** Use cases such as field service, medical scheduling, conference planning, or shift coordination where users need a fast day-by-day view on mobile.

## 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
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) - 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-21T09:00',
    end: '2026-10-24T18:00',
    title: 'Business of Software Conference',
    resource: 2
  },
  {
    start: '2026-10-21T13:00',
    end: '2026-10-22T21:00',
    title: 'Friends binge marathon',
    resource: 4
  },
  {
    start: '2026-10-28T13:00',
    end: '2026-10-29T21:00',
    title: 'Friends binge marathon',
    resource: 1
  },
  {
    start: '2026-10-21T08:00',
    end: '2026-10-21T10:00',
    title: 'Product team mtg.',
    resource: 5
  },
  {
    start: '2026-10-22T07:00',
    end: '2026-10-22T08:00',
    title: 'Green box to post office',
    resource: 5
  },
  {
    start: '2026-10-20T08:30',
    end: '2026-10-20T10:00',
    title: 'Quick mtg. with Martin',
    resource: 2
  },
  {
    start: '2026-10-08T09:30',
    end: '2026-10-08T12:00',
    title: 'Product team mtg.',
    resource: 4
  },
  {
    start: '2026-10-08T11:00',
    end: '2026-10-08T12:30',
    title: 'Stakeholder mtg.',
    resource: 2
  },
  {
    start: '2026-10-08T13:00',
    end: '2026-10-08T14:30',
    title: "Lunch @ Butcher's",
    resource: 2
  },
  {
    start: '2026-10-08T15:00',
    end: '2026-10-08T17:00',
    title: 'General orientation',
    resource: 4
  },
  {
    recurring: {
      repeat: 'yearly',
      month: now.getMonth() + 1,
      day: 14
    },
    allDay: true,
    title: 'Dexter BD',
    resource: 2
  },
  {
    recurring: {
      repeat: 'yearly',
      month: now.getMonth() + 1,
      day: 25
    },
    allDay: true,
    title: 'Luke BD',
    resource: 2
  },
  {
    recurring: {
      repeat: 'weekly',
      weekDays: 'WE'
    },
    allDay: true,
    title: 'Employment (Semi-weekly)',
    resource: [1, 3]
  },
  {
    start: '2026-10-10T00:00',
    end: '2026-10-15T00:00',
    allDay: true,
    title: 'Sam OFF',
    resource: 4
  },
  {
    start: '2026-10-18T00:00',
    end: '2026-10-29T00:00',
    allDay: true,
    title: 'Europe tour',
    resource: [1, 4, 5]
  },
  {
    start: '2026-02-07T00:00',
    end: '2026-02-25T00:00',
    allDay: true,
    title: 'Dean OFF',
    resource: 5
  },
  {
    start: '2026-03-05T00:00',
    end: '2026-03-14T00:00',
    allDay: true,
    title: 'Mike OFF',
    resource: 2
  },
  {
    start: '2026-05-07T00:00',
    end: '2026-05-16T00:00',
    allDay: true,
    title: 'John OFF',
    resource: 4
  },
  {
    start: '2026-06-01T00:00',
    end: '2026-06-11T00:00',
    allDay: true,
    title: 'Carol OFF',
    resource: 1
  },
  {
    start: '2026-07-02T00:00',
    end: '2026-07-17T00:00',
    allDay: true,
    title: 'Jason OFF',
    resource: 5
  },
  {
    start: '2026-08-06T00:00',
    end: '2026-08-14T00:00',
    allDay: true,
    title: 'Ashley OFF',
    resource: 3
  },
  {
    start: '2026-09-10T00:00',
    end: '2026-09-20T00:00',
    allDay: true,
    title: 'Marisol OFF',
    resource: 2
  },
  {
    start: '2026-10-01T00:00',
    end: '2026-10-12T00:00',
    allDay: true,
    title: 'Sharon OFF',
    resource: 3
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 12,
      day: 25
    },
    allDay: true,
    title: 'Christmas Day',
    resource: [1, 2, 3, 4, 5]
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 1,
      day: 1
    },
    allDay: true,
    title: "New Year's day",
    resource: [1, 2, 3, 4, 5]
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 4,
      day: 1
    },
    allDay: true,
    title: "April Fool's Day",
    resource: [1, 2, 3, 4, 5]
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 720 for the third quarter',
    resource: 5
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 730 and pay tax on wagers accepted during September',
    resource: 1
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 2290 and pay the tax for vehicles first used during September',
    resource: 5
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 941 for the third quarter',
    resource: 2
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'Deposit FUTA owed through Sep if more than $500',
    resource: 14
  },
  {
    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',
    resource: 2
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'File Form 730 and pay tax on wagers accepted during October',
    resource: 5
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'File Form 2290 and pay the tax for vehicles first used during October',
    resource: 4
  }
])

const myResources = ref([
  {
    id: 1,
    name: 'Resource A',
    color: '#fdf500'
  },
  {
    id: 2,
    name: 'Resource B',
    color: '#ff0101'
  },
  {
    id: 3,
    name: 'Resource C',
    color: '#01adff'
  },
  {
    id: 4,
    name: 'Resource D',
    color: '#239a21'
  },
  {
    id: 5,
    name: 'Resource E',
    color: '#ff4600'
  }
])

const myView = {
  timeline: { type: 'day' }
}
</script>

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

### SFC TS

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

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

const now: Date = new Date()

const myEvents = ref<MbscCalendarEvent[]>([
  {
    start: '2026-10-21T09:00',
    end: '2026-10-24T18:00',
    title: 'Business of Software Conference',
    resource: 2
  },
  {
    start: '2026-10-21T13:00',
    end: '2026-10-22T21:00',
    title: 'Friends binge marathon',
    resource: 4
  },
  {
    start: '2026-10-28T13:00',
    end: '2026-10-29T21:00',
    title: 'Friends binge marathon',
    resource: 1
  },
  {
    start: '2026-10-21T08:00',
    end: '2026-10-21T10:00',
    title: 'Product team mtg.',
    resource: 5
  },
  {
    start: '2026-10-22T07:00',
    end: '2026-10-22T08:00',
    title: 'Green box to post office',
    resource: 5
  },
  {
    start: '2026-10-20T08:30',
    end: '2026-10-20T10:00',
    title: 'Quick mtg. with Martin',
    resource: 2
  },
  {
    start: '2026-10-08T09:30',
    end: '2026-10-08T12:00',
    title: 'Product team mtg.',
    resource: 4
  },
  {
    start: '2026-10-08T11:00',
    end: '2026-10-08T12:30',
    title: 'Stakeholder mtg.',
    resource: 2
  },
  {
    start: '2026-10-08T13:00',
    end: '2026-10-08T14:30',
    title: "Lunch @ Butcher's",
    resource: 2
  },
  {
    start: '2026-10-08T15:00',
    end: '2026-10-08T17:00',
    title: 'General orientation',
    resource: 4
  },
  {
    recurring: {
      repeat: 'yearly',
      month: now.getMonth() + 1,
      day: 14
    },
    allDay: true,
    title: 'Dexter BD',
    resource: 2
  },
  {
    recurring: {
      repeat: 'yearly',
      month: now.getMonth() + 1,
      day: 25
    },
    allDay: true,
    title: 'Luke BD',
    resource: 2
  },
  {
    recurring: {
      repeat: 'weekly',
      weekDays: 'WE'
    },
    allDay: true,
    title: 'Employment (Semi-weekly)',
    resource: [1, 3]
  },
  {
    start: '2026-10-10T00:00',
    end: '2026-10-15T00:00',
    allDay: true,
    title: 'Sam OFF',
    resource: 4
  },
  {
    start: '2026-10-18T00:00',
    end: '2026-10-29T00:00',
    allDay: true,
    title: 'Europe tour',
    resource: [1, 4, 5]
  },
  {
    start: '2026-02-07T00:00',
    end: '2026-02-25T00:00',
    allDay: true,
    title: 'Dean OFF',
    resource: 5
  },
  {
    start: '2026-03-05T00:00',
    end: '2026-03-14T00:00',
    allDay: true,
    title: 'Mike OFF',
    resource: 2
  },
  {
    start: '2026-05-07T00:00',
    end: '2026-05-16T00:00',
    allDay: true,
    title: 'John OFF',
    resource: 4
  },
  {
    start: '2026-06-01T00:00',
    end: '2026-06-11T00:00',
    allDay: true,
    title: 'Carol OFF',
    resource: 1
  },
  {
    start: '2026-07-02T00:00',
    end: '2026-07-17T00:00',
    allDay: true,
    title: 'Jason OFF',
    resource: 5
  },
  {
    start: '2026-08-06T00:00',
    end: '2026-08-14T00:00',
    allDay: true,
    title: 'Ashley OFF',
    resource: 3
  },
  {
    start: '2026-09-10T00:00',
    end: '2026-09-20T00:00',
    allDay: true,
    title: 'Marisol OFF',
    resource: 2
  },
  {
    start: '2026-10-01T00:00',
    end: '2026-10-12T00:00',
    allDay: true,
    title: 'Sharon OFF',
    resource: 3
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 12,
      day: 25
    },
    allDay: true,
    title: 'Christmas Day',
    resource: [1, 2, 3, 4, 5]
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 1,
      day: 1
    },
    allDay: true,
    title: "New Year's day",
    resource: [1, 2, 3, 4, 5]
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 4,
      day: 1
    },
    allDay: true,
    title: "April Fool's Day",
    resource: [1, 2, 3, 4, 5]
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 720 for the third quarter',
    resource: 5
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 730 and pay tax on wagers accepted during September',
    resource: 1
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 2290 and pay the tax for vehicles first used during September',
    resource: 5
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'File Form 941 for the third quarter',
    resource: 2
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 2
    },
    allDay: true,
    title: 'Deposit FUTA owed through Sep if more than $500',
    resource: 14
  },
  {
    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',
    resource: 2
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'File Form 730 and pay tax on wagers accepted during October',
    resource: 5
  },
  {
    recurring: {
      repeat: 'yearly',
      month: 11,
      day: 30
    },
    allDay: true,
    title: 'File Form 2290 and pay the tax for vehicles first used during October',
    resource: 4
  }
])

const myResources = ref<MbscResource[]>([
  {
    id: 1,
    name: 'Resource A',
    color: '#fdf500'
  },
  {
    id: 2,
    name: 'Resource B',
    color: '#ff0101'
  },
  {
    id: 3,
    name: 'Resource C',
    color: '#01adff'
  },
  {
    id: 4,
    name: 'Resource D',
    color: '#239a21'
  },
  {
    id: 5,
    name: 'Resource E',
    color: '#ff4600'
  }
])

const myView: MbscEventcalendarView = {
  timeline: { type: 'day' }
}
</script>

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

## Implementation notes

- Use `timeline: { type: 'day' }` - a single-day view.
- Define 5 resources: Resource A (yellow `#fdf500`), Resource B (red `#ff0101`), Resource C (blue `#01adff`), Resource D (green `#239a21`), Resource E (orange `#ff4600`).
- Pass a static array directly to the `data` option.
- The dataset demonstrates the full range of Mobiscroll event patterns:
  - **Timed events** with `dyndatetime` offsets (yesterday, today, tomorrow, today+N) so the demo always shows content relative to the current date
  - **Multi-day events** spanning several days, including events crossing midnight
  - **All-day events** via `allDay: true`
  - **Multi-resource events** by setting `resource` to an array of IDs (e.g. `resource: [1, 4, 5]`) - the event appears in all listed resource rows simultaneously
  - **Recurring yearly events** using `recurring: { repeat: 'yearly', month: M, day: D }`, including entries anchored to the current month via `now.getMonth() + 1`
  - **Recurring weekly events** using `recurring: { repeat: 'weekly', weekDays: 'WE' }` for specific weekday patterns

## 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: [Events from Remote API](https://demo.mobiscroll.com/vue/timeline/load-events-from-remote-api.md) - Populate a Vue Timeline with events fetched from a REST API or JSON endpoint — pass a data array to the timeline and keep events in sync.