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

# Large Dataset Performance - Angular Timeline demo

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

- [Live demo](https://demo.mobiscroll.com/angular/timeline/loading-big-data-sets)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/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), [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/angular/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-themeVariant) - option
- [`data`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-resources) - option
- [`view`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-view) - option
- [`onPageLoading`](https://mobiscroll.com/docs/angular/eventcalendar/api#event-onPageLoading) - event

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
  MbscCalendarEvent,
  MbscEventcalendarView,
  MbscModule,
  MbscPageLoadingEvent,
  setOptions,
} from '@mobiscroll/angular';

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

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

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

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  myEvents: MbscCalendarEvent[] = [];

  myResources = myResources;

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

  loadEvents(args: MbscPageLoadingEvent) {
    setTimeout(() => {
      const newEvents: MbscCalendarEvent[] = [];
      const year = args.firstDay.getFullYear();
      // 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,
        });
      }
      this.myEvents = newEvents;
    });
  }
}
```

### Template

```html
<mbsc-eventcalendar [data]="myEvents" [resources]="myResources" [view]="myView" (onPageLoading)="loadEvents($event)"> </mbsc-eventcalendar>
```

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

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

On a trial, add `--trial` to the config command: `mobiscroll config angular --trial`.

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

## Related demos

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