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

# Large Dataset Performance - JavaScript Timeline demo

Handle thousands of events and resources in a Javascript Timeline — virtual scrolling keeps navigation smooth across long date ranges on mobile and desktop. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/timeline/loading-big-data-sets)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/timeline/loading-big-data-sets)
- This demo in other frameworks: [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), [Vue](https://demo.mobiscroll.com/vue/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/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) - option
- [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`onPageLoading`](https://mobiscroll.com/docs/javascript/eventcalendar/api#event-onPageLoading) - event
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

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

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

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

  mobiscroll.eventcalendar('#demo-big-data', {
    clickToCreate: true,
    dragToCreate: true,
    dragToMove: true,
    dragToResize: true,
    eventDelete: true,
    resources: myResources,
    view: {
      timeline: {
        type: 'year',
        eventDisplay: 'fill',
      },
    },
    onPageLoading: function (args, inst) {
      setTimeout(function () {
        var myEvents = [];
        var year = args.firstDay.getFullYear();
        // Generate random events
        for (var i = 0; i < eventsNr; i++) {
          var day = getRandomInt(1, 31);
          var length = getRandomInt(2, 5);
          var resource = getRandomInt(1, resourceNr + 1);
          var month = getRandomInt(0, 12);
          var color = getRandomInt(0, 6);
          myEvents.push({
            color: myEventColors[color],
            end: new Date(year, month, day + length),
            resource: resource,
            start: new Date(year, month, day),
            title: 'Event ' + i,
          });
        }
        inst.setEvents(myEvents);
      });
    },
  });
})();
```

### HTML

```html
<div id="demo-big-data"></div>
```

### CSS

```css
.demo-loading-big-data-sets {
    height: 100%;
}
```

## 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-javascript.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 javascript
   ```

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 javascript --trial`.

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

## Related demos

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