Starter project showing how to use DHTMLX Angular Scheduler in an Angular App.
Related tutorial: https://docs.dhtmlx.com/scheduler/integrations/angular/quick-start/
Clone the repo and run
git clone https://github.com/DHTMLX/angular-scheduler-quick-start.git
cd angular-scheduler-quick-start
npm install
npm startThe component allows simple declarative initialization:
import { Component } from "@angular/core";
import {
DhxSchedulerComponent,
type AngularSchedulerDataConfig,
type Event,
type SchedulerConfig,
} from "@dhtmlx/trial-angular-scheduler";
import { mainDate, schedulerEvents } from "./demo-data";
@Component({
selector: "app-scheduler",
standalone: true,
imports: [DhxSchedulerComponent],
host: { style: "display:block;height:100%;" },
template: `
<dhx-scheduler
[events]="events"
[date]="date"
[config]="config"
[data]="dataConfig"
view="week">
</dhx-scheduler>
`,
})
export class SchedulerComponent {
events: Event[] = schedulerEvents;
date = mainDate;
config: SchedulerConfig = {
first_hour: 6,
last_hour: 22,
};
dataConfig: AngularSchedulerDataConfig = {
save: (entity, action, data, id) => {
console.log("[data.save]", entity, action, data, id);
},
};
}Check the Online documentation to find more.
src/
app/
scheduler.component.ts <- <app-scheduler> component
demo-data.ts <- minimal events array
app.ts <- mounts Scheduler component
app.config.ts
styles.css
index.html
Start your 30-day trial to download the complete sample pack (recurring events, timeline view, units view, etc.).
- angular-scheduler-rxjs-starter — same Scheduler, but wired to an RxJS state service with
BehaviorSubject,data.batchSave, and snapshot-based undo/redo. Step up here when you need state management.
The code in this repository is released under the MIT License.
@dhx/angular-scheduler and @dhtmlx/trial-angular-scheduler are commercial libraries - use them under a valid license or evaluation agreement.