The Angular Scheduler on-page performance is affected by two Angular-specific factors:

  1. UI updates after a change

  2. Change detection

See also a tutorial on splitting the bundle and loading modules lazily:

UI Update After a Change

Changing the config object always results in full Scheduler refresh (equivalent of calling .update()). This is a relatively quick operation which only draws the current viewport with the default settings and usually doesn't take longer than 200-300ms.

Changing the events array results in an update of individual events (if up to 10 events are changed) or an update of all events (11 or more events are changed).

Change Detection

The state of config and events is checked during every change detection cycle (handled by zone.js). The change detection cycle is fired very often - it's triggered by even a minor UI change such as a mouse move.

For small config and events object this doesn't mean any performance problem but with a growing number of resources (specified in config object) and events (events attribute) it can become a significant burden. It can affect overall UI performance (no only interaction with the Scheduler control).

You can switch to using the native API to avoid this problem.

How to Load Scheduler Resources using the Direct API

import {Component, ViewChild} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-scheduler-example',
  template: `<daypilot-scheduler [config]="config" #scheduler1></daypilot-scheduler>`
})
export class AppComponent {

  @ViewChild("scheduler1")
  scheduler!: DayPilotSchedulerComponent;

  config: DayPilot.SchedulerConfig = {
    timeHeaders: [
      { groupBy: "Month", format: "MMMM yyyy" },
      { groupBy: "Day", format: "d" }
    ],
    scale: "Day",
    start: "2021-11-01",
    days: 30
  }

  loadResources(resources) {
    this.scheduler.control.update({resources});
  }

  // ...

}

You can continue using the config attribute for the Scheduler configuration but don't include the resources property (it would override the value that was set directly).

How to Load Scheduler Events using the Direct API

import {Component, ViewChild} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-scheduler-example',
  template: `<daypilot-scheduler #scheduler1></daypilot-scheduler>`
})
export class AppComponent {

  @ViewChild("scheduler1")
  scheduler!: DayPilotSchedulerComponent;

  config: DayPilot.SchedulerConfig = {
    timeHeaders: [
      { groupBy: "Month", format: "MMMM yyyy" },
      { groupBy: "Day", format: "d" }
    ],
    // ...
  }

  loadEvents(events) {
    this.scheduler.control.update({events});
  }  

  // ...

}

Angular Scheduler Performance Tutorials