--- title: "Angular Scheduler Large Dataset Performance Example | Mobiscroll" component: "Scheduler" framework: "Angular" library_version: "6.1.5" url: "https://demo.mobiscroll.com/angular/scheduler/loading-big-data-sets" --- # Large Dataset Performance - Angular Scheduler demo See how the Angular Scheduler handles large data sets— virtual scrolling keeps 20 resources and 2,000 events smooth on mobile and desktop. - [Live demo](https://demo.mobiscroll.com/angular/scheduler/loading-big-data-sets) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/tree/main/src/demos/eventcalendar/scheduler/loading-big-data-sets) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/loading-big-data-sets.md), [jQuery](https://demo.mobiscroll.com/jquery/scheduler/loading-big-data-sets.md), [React](https://demo.mobiscroll.com/react/scheduler/loading-big-data-sets.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/loading-big-data-sets.md) ## Description The scheduler 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 20 resources across a whole month with 2000 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 monthly scheduler layout with a fixed month strip at the top, repeated resources for each day, a fixed all-day row below it, and a scrollable scheduler time grid for the selected month. - **Virtual scroll** The scheduler supports virtual horizontal and vertical scrolling. The view virtualization makes it possible to work with many resources across long date ranges. - **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 weeks and jump back to the current day. - **Week view** The fixed strip below the header displays the days of the selected month, with the current date highlighted by a blue circle. - **Resources**: Each day repeats the same 20 resources. - **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid. - **Time grid** The scheduler grid scrolls vertically through the hours of the selected month. - **Timed events** Timed events are displayed in the monthly scheduler grid 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. - **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts. - **Current time** A blue current-time line appears across the time grid. - **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration. - **Event selection** Clicking an event selects and highlights it. - **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event. ## Best for - **Virtual scrolling** Demonstrating how horizontal and vertical virtual scroll works with the scheduler. ## 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 - [`groupBy`](https://mobiscroll.com/docs/angular/eventcalendar/api#opt-groupBy) - 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 = 20; const eventsNr = 2000; 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 = { scheduler: { type: 'month', timeCellStep: 15, timeLabelStep: 15, }, }; loadEvents(args: MbscPageLoadingEvent) { setTimeout(() => { const newEvents: MbscCalendarEvent[] = []; const year = args.firstDay.getFullYear(); const month = args.firstDay.getMonth(); const daysInMonth = new Date(year, month + 1, 0).getDate(); // Generate random events for the visible month for (let i = 0; i < eventsNr; i++) { const day = getRandomInt(1, daysInMonth + 1); const resource = getRandomInt(1, resourceNr + 1); const color = getRandomInt(0, myEventColors.length); const startHour = getRandomInt(0, 23); const startMinute = getRandomInt(0, 4) * 15; const start = new Date(year, month, day, startHour, startMinute); const end = new Date(start.getTime() + getRandomInt(2, 9) * 15 * 60 * 1000); if (end.getDate() === start.getDate()) { newEvents.push({ color: myEventColors[color], end: end, resource: resource, start: start, title: 'Event ' + i, }); } } this.myEvents = newEvents; }); } } ``` ### Template ```html ``` ### CSS ```css /* code */ ``` ## Implementation notes - Use `view: { scheduler: { type: 'month', timeCellStep: 15, timeLabelStep: 15 } }` with `groupBy="date"` - a month view with 15-minute cells and date-grouped columns (rows = resources, columns = days). - Programmatically generate 20 resources at module level. - **`onPageLoading` handler** (Vue: `@page-loading`): generates 2,000 random events for the currently visible month on every page navigation. 1. Extract `year` and `month` from `args.firstDay.getFullYear()` / `args.firstDay.getMonth()`. 2. Wrap the generation loop in `setTimeout` (no delay) to defer heavy computation off the current render cycle. 3. For each event, pick a random `day`, `resource`, `color`, `startHour`, and `startMinute` (multiples of 15), then compute `end` as 2-8 × 15-minute blocks after `start`. Skip any event whose end crosses midnight - all generated events stay within a single day. 4. After the loop, update the events; 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: [Lazy Load Events on Scroll](https://demo.mobiscroll.com/angular/scheduler/load-events-on-scroll.md) - Load Angular scheduler events on demand as users scroll — fetch only the visible date range to keep performance fast with large event counts.