Angular Scheduler Performance

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:

• Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)

UI Update After a Change

Changing configuration can refresh the Scheduler’s layout. Keep frequently replaced event and resource collections in the dedicated [events] and [resources] inputs, so their ownership is separate from display options.

The wrapper can apply small event changes incrementally; replacing an array or changing layout options can require a broader update. Measure with the actual data and custom content used by your application. There is no fixed update-time guarantee.

Change Detection

Ordinary object and array inputs are checked during Angular change detection. Large collections and deeply nested configuration increase that work. Pass Angular signals directly to the dedicated inputs when using the signal API, and replace their values when application data changes. See Angular Scheduler for signal binding and zoneless change-notification examples.

You can also manage large collections through the Scheduler API. Choose a clear owner for each collection: do not simultaneously bind a collection and overwrite it through a separate API path.

How to Load Scheduler Resources using the Direct API

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

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <button (click)="action0()">Load rooms</button>
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    events: []
  };
  async action0() {
    const dp = this.scheduler.control;
    try { const {data} = await DayPilot.Http.get("/api/resources"); dp.update({resources: data}); }
    catch { await DayPilot.Modal.alert("Could not load rooms."); }
  }
}

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, DayPilotModule, DayPilotSchedulerComponent} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <button (click)="action0()">Load reservations</button>
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]
  };
  async action0() {
    const dp = this.scheduler.control;
    try { const {data} = await DayPilot.Http.get("/api/events?start=2026-11-01&end=2026-12-01"); dp.update({events: data}); }
    catch { await DayPilot.Modal.alert("Could not load reservations."); }
  }
}

Angular Scheduler Performance Tutorials

• Angular Scheduler: Loading 400,000 Events

• Angular Scheduler: Dynamic Loading of Large Data Sets

• Improve Angular Scheduler Performance using Lazy Loading (Code Splitting)