---
title: "Vue Timeline Large Dataset Performance Example | Mobiscroll"
component: "Timeline"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/timeline/loading-big-data-sets"
---

# Large Dataset Performance - Vue Timeline demo

Handle thousands of events and resources in a Vue Timeline — virtual scrolling keeps navigation smooth across long date ranges on mobile and desktop. For Vue and Nuxt.

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

## Description

The timeline supports virtual horizontal and vertical scrolling. The view virtualization makes it possible to work with many resources across long date ranges.

The following examples shows that navigating 200 resources across a whole year with 10000 events won't pose any problems for the browser neither on mobile or desktop.

View virtualization is always enabled and doesn't need to be turned on explicitly.

## What this demo shows

- A desktop month timeline with days arranged horizontally and resources listed as rows on the left.
- **Header navigation** The month and year label opens date navigation, the previous and next arrows move between months, and the Today button returns to the current date.
- **Month view** The strip below the header shows the month and year and below the days of the selected month, with the current date highlighted.
- **Resources** Multiple resources are shown as separate timeline rows.
- **Event labels** Events appear as colored labels with event title in bold.
- **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

- **Large event datasets** Loading events only for the visible timeline range instead of loading every event up front.
- **Resource scheduling** Showing many resources in a timeline where users need to scroll vertically through rows and horizontally through dates.
- **Long-range planning views** Keeping month-based timeline navigation responsive while users move across a wider date range.
- **Performance-sensitive scheduling apps** Reducing initial page load work when the full event set is too large to keep in memory from the start.

## 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
- [`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
- [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) - option
- [`page-loading`](https://mobiscroll.com/docs/vue/eventcalendar/api#event-onPageLoading) - event

## Code

### SFC JS

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

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

const myEvents = ref([])

const myView = {
  timeline: {
    type: 'year',
    eventDisplay: 'fill'
  }
}

const resourceNr = 200
const eventsNr = 10000
const myResources = []
const myEventColors = ['#ff0101', '#239a21', '#8f1ed6', '#01adff', '#d8ca1a']

for (let i = 1; i <= resourceNr; i++) {
  myResources.push({ name: 'Resource ' + i, id: i })
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min) + min)
}

function handlePageLoading(args) {
  setTimeout(() => {
    const year = args.firstDay.getFullYear()
    const newEvents = []
    // Generate random events
    for (let i = 0; i < eventsNr; i++) {
      const day = getRandomInt(1, 31)
      const length = getRandomInt(2, 5)
      const resource = getRandomInt(1, resourceNr + 1)
      const month = getRandomInt(0, 12)
      const color = getRandomInt(0, 6)
      newEvents.push({
        color: myEventColors[color],
        end: new Date(year, month, day + length),
        resource: resource,
        start: new Date(year, month, day),
        title: 'Event ' + i
      })
    }
    myEvents.value = newEvents
  })
}
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true"
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    @page-loading="handlePageLoading"
  />
</template>

<style>
.demo-loading-big-data-sets {
  height: 100%;
}
</style>
```

### SFC TS

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

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

const myEvents = ref<MbscCalendarEvent[]>([])

const myView: MbscEventcalendarView = {
  timeline: {
    type: 'year',
    eventDisplay: 'fill'
  }
}

const resourceNr: number = 200
const eventsNr: number = 10000
const myResources: MbscResource[] = []
const myEventColors: any = ['#ff0101', '#239a21', '#8f1ed6', '#01adff', '#d8ca1a']

for (let i = 1; i <= resourceNr; i++) {
  myResources.push({ name: 'Resource ' + i, id: i })
}

function getRandomInt(min: number, max: number) {
  return Math.floor(Math.random() * (max - min) + min)
}

function handlePageLoading(args: MbscPageLoadingEvent) {
  setTimeout(() => {
    const year = args.firstDay.getFullYear()
    const newEvents = []
    // Generate random events
    for (let i = 0; i < eventsNr; i++) {
      const day = getRandomInt(1, 31)
      const length = getRandomInt(2, 5)
      const resource = getRandomInt(1, resourceNr + 1)
      const month = getRandomInt(0, 12)
      const color = getRandomInt(0, 6)
      newEvents.push({
        color: myEventColors[color],
        end: new Date(year, month, day + length),
        resource: resource,
        start: new Date(year, month, day),
        title: 'Event ' + i
      })
    }
    myEvents.value = newEvents
  })
}
</script>

<template>
  <MbscEventcalendar :clickToCreate="true" :dragToCreate="true" :dragToMove="true" :dragToResize="true" :eventDelete="true"
    :view="myView"
    :data="myEvents"
    :resources="myResources"
    @page-loading="handlePageLoading"
  />
</template>

<style>
.demo-loading-big-data-sets {
  height: 100%;
}
</style>
```

## Implementation notes

- Use `timeline: { type: 'year', eventDisplay: 'fill' }` - a full-year view where events fill the width of their date cell.
- Programmatically generate 200 resources at module level (outside the component): loop `i = 1..200`, push `{ id: i, name: 'Resource i' }`.
- View virtualization is always enabled - no explicit configuration needed.
- **`onPageLoading` handler**: regenerates 10,000 random events for the currently visible year on every page navigation.
  1. Extract the current year from `args.firstDay.getFullYear()`.
  2. Wrap the entire event-generation loop in `setTimeout` (no delay) to defer heavy computation off the current render cycle and avoid UI blocking.
  3. Generate 10,000 events. For each, pick random values for `month` (0-11), `day` (1-31), `length` (2-5 days, used to compute `end`), `resource` (1-200), `color` (from a fixed palette), and `title` (`'Event ' + i`).
  4. After the loop, update the calendar's events.
- Update the events inside the `setTimeout` callback; for the imperative API, call `inst.setEvents(myEvents)`.

## 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

- Previous: [Load Resources on Scroll](https://demo.mobiscroll.com/vue/timeline/load-resources-on-scroll.md) - Build responsive large-resource scheduling timelines with the Vue Timeline — use virtual scrolling to load only visible resource rows on demand.