DHTMLX Angular Scheduler

Getting started | Features | License | Useful links | Follow us

DHTMLX Angular Scheduler is an Angular wrapper for the DHTMLX Scheduler library.

It provides a declarative way to integrate all of DHTMLX Scheduler's rich features - such as recurring events, Units and Timeline views - directly into Angular apps. Pass events, config, and templates as inputs, render Angular components inside the Scheduler, and handle edits through wrapper callbacks.

Important: this npm package is a trial build intended for evaluation only. For access to commercial licenses and technical support, please request an evaluation on our website: https://dhtmlx.com/docs/products/dhtmlxScheduler-for-Angular/download.shtml

Getting started

Install package

Professional Evaluation version:

npm install @dhtmlx/trial-angular-scheduler

Import the wrapper styles in src/styles.css:

@import "@dhtmlx/trial-angular-scheduler/dist/angular-scheduler.css";

html,
body {
  height: 100%;
  margin: 0;
}

app-root {
  display: block;
  height: 100vh;
}

Create src/app/scheduler-chart.component.ts:

import { Component } from '@angular/core';
import {
  DhxSchedulerComponent,
  type AngularSchedulerDataConfig,
  type Event,
} from '@dhtmlx/trial-angular-scheduler';

import { schedulerEvents } from './demo-data';

@Component({
  selector: 'app-scheduler-chart',
  standalone: true,
  imports: [DhxSchedulerComponent],
  host: { style: 'display:block;height:100%;' },
  template: `
    <dhx-scheduler
      style="display:block;height:100%;"
      [events]="events"
      [date]="date"
      view="week"
      [data]="dataConfig">
    </dhx-scheduler>
  `,
})
export class SchedulerChartComponent {
  events: Event[] = schedulerEvents;
  date = new Date('2025-08-15T00:00:00Z');

  dataConfig: AngularSchedulerDataConfig = {
    save: (entity, action, item, id) => {
      console.log('save', { entity, action, item, id });
    },
  };
}

Render it from src/app/app.component.ts:

import { Component } from '@angular/core';
import { SchedulerChartComponent } from './scheduler-chart.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SchedulerChartComponent],
  template: `<app-scheduler-chart></app-scheduler-chart>`,
})
export class AppComponent {}

demo-data.ts should export a schedulerEvents array. Replace it with your own project data.

Requirements

• Angular 19.x or newer

Complete guides

• https://docs.dhtmlx.com/scheduler/integrations/angular/

Features

• Angular wrapper component for DHTMLX Scheduler
• Standalone and NgModule Angular app support
• Angular components in event boxes, lightbox, and templates
• TypeScript support
• 10 built-in views: Day, Week, Month, Agenda, Grid, Map, Timeline, Week Agenda, Units and Year
• recurring events
• events filtering
• 7 different skins
• online export to PDF, PNG
• 32 locales
• keyboard navigation
• resources timeline and units views

License

dhtmlxScheduler v.8.0.0-beta1 Professional

This software is covered by DHTMLX Evaluation License. Contact [email protected] to get a proprietary license. Usage without proper license is prohibited.

(c) XB Software Ltd.

Useful links

• DHTMLX Angular Scheduler product page
• DHTMLX Scheduler product page
• Official documentation
• Online samples
• Export services
• List of available integrations
• Support forum

Follow us

Read us on Medium :newspaper:

Follow us on X :bird:

Like our page on Facebook :thumbsup: