Angular Scheduler

Angular Scheduler is the official Angular wrapper for DHTMLX Scheduler. It gives you a standalone Angular component API while preserving access to the full Scheduler engine.

What You Get With The Wrapper

• Declarative inputs for events, date, view, config, templates, plugins, theme, locale, markers, views, xy, and filter.
• Controlled event synchronization through the events input.
• Optional Scheduler-owned loading through data.load.
• Change handling through data.save and data.batchSave.
• Scheduler event wiring through on<EventName> inputs.
• Angular lifecycle access through (ready) and component instance access through @ViewChild.
• Angular component rendering in templates and event boxes through templateComponent(...).
• Angular custom lightbox and modal hooks for event editing and confirmations.

import { Component } from "@angular/core";
import { DhxSchedulerComponent, type Event } from "@dhx/angular-scheduler";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [DhxSchedulerComponent],
  template: `
    <div style={{height: '600px'}}>
      <dhx-scheduler [events]="events" view="week"></dhx-scheduler>
    </div>
  `,
})
export class AppComponent {
  events: Event[] = [
    {
      id: 1,
      text: "Planning",
      start_date: new Date("2026-05-18T09:00:00"),
      end_date: new Date("2026-05-18T10:30:00"),
    },
  ];
}

If you want the architecture and capability map first, read Angular Scheduler Overview.

Recommended Learning Path

Follow this order if you are new to the wrapper:

1. Installation for package channel selection and imports.
2. Quick Start to render your first Scheduler.
3. Configuration Reference for inputs, events, templates, and data callback details.
4. Data Binding and State Management Basics to choose a data ownership model.
5. RxJS Integration Tutorial implement a store-driven pattern with BehaviorSubject and AsyncPipe.

Wrapper Vs Low-Level JS Integration

Pick the integration path based on how much Angular lifecycle and synchronization logic you want to manage yourself.

• Use the official wrapper (@dhtmlx/trial-angular-scheduler or @dhx/angular-scheduler) for Angular inputs, lifecycle integration, wrapper-managed synchronization.
• Use low-level JS integration only when you want direct control over instance lifecycle, markup, and manual API orchestration.

For the low-level path, use dhtmlxScheduler with Angular.

Data And State Management Entry Point

Start with the state section if you already know you need store or backend synchronization:

• Data & State Management
• Data Binding and State Management Basics
• Using Angular Scheduler with RxJS

Examples and evaluation resources

Browse the public Angular Scheduler examples for runnable demos of the wrapper:

• Live demo
• GitHub repository

If you're evaluating Angular Scheduler, the evaluation page provides access to technical support during the evaluation period. See Installation.