Using DHTMLX Scheduler Properties in Angular Scheduler

This page documents the public wrapper surface of @dhtmlx/trial-angular-scheduler and @dhx/angular-scheduler.

Available Inputs

Input	Type	Description
events	Array<Event \| SerializedEvent>	Event collection rendered in Scheduler.
date	Date \| string	Active date used to render the selected view.
view	string	Active Scheduler view. Defaults to "week".
markers	Marker[]	Time markers and blocked time spans.
plugins	SchedulerPlugins	Plugin activation map, for example { recurring: true, timeline: true }.
data	AngularSchedulerDataConfig \| null	Transport callbacks: load, save, batchSave.
locale	string \| Record<string, any>	Locale name or locale object. Defaults to "en".
theme	string	Scheduler skin name. Defaults to "terrace".
templates	AngularSchedulerTemplates	Merged into scheduler.templates; template functions can return Angular template descriptors.
config	SchedulerConfig	Merged into scheduler.config.
xy	SchedulerXY	Merged into scheduler.xy sizing options.
filter	EventFilter	Predicate used to filter displayed events.
modals	SchedulerModals \| null	Overrides built-in confirmation dialogs.
eventBoxRenderer	EventBoxRenderer \| null	Custom renderer for event box elements.
views	SchedulerViewsProp	Registers Timeline, Units, or Grid view configurations.
customLightbox	CustomLightboxConfig \| Type<any> \| null	Replaces the built-in lightbox with an Angular component.
on<EventName>	SchedulerCallback	Scheduler event handler input, for example [onViewChange] or [onBeforeLightbox].

Output And Instance Access

(ready)

The wrapper emits ready once after initialization and initial synchronization.

Event payload shape:

{ instance: SchedulerStatic }

<dhx-scheduler [events]="events" (ready)="onReady($event)"></dhx-scheduler>

onReady(event: { instance: SchedulerStatic }): void {
  event.instance.setCurrentView(new Date(), "week");
}

instance via @ViewChild

Use @ViewChild(DhxSchedulerComponent) when you need direct imperative access.

@ViewChild(DhxSchedulerComponent) schedulerComponent?: DhxSchedulerComponent;

showToday(): void {
  this.schedulerComponent?.instance?.setCurrentView(new Date(), "week");
}

Data Collections And Synchronization

Use events when Angular state or an RxJS store is your source of truth.

<dhx-scheduler [events]="events" [date]="date" [view]="view"></dhx-scheduler>

Synchronization behavior summary:

• event updates are diff-based for routine changes,
• wrapper can reset and re-parse when a diff is not safe or effective,
• local Scheduler-created removals are reconciled with the next controlled events input.

Use Data Binding and State Management Basics for model tradeoffs.

Config, Templates, Plugins, Theme, Locale

Use these inputs for declarative Scheduler setup instead of imperative instance calls.

config = {
  first_hour: 7,
  last_hour: 21,
  time_step: 30,
};

templates = {
  event_class: (_start: Date, _end: Date, event: any) =>
    event.classname ? `event-${event.classname}` : "",
};

plugins = {
  recurring: true,
  timeline: true,
};

<dhx-scheduler
  [config]="config"
  [templates]="templates"
  [plugins]="plugins"
  [locale]="locale"
  [theme]="theme">
</dhx-scheduler>

Event Handler Inputs

Pass Scheduler event handlers as on<EventName> inputs.

onViewChange = (mode: string, date: Date) => {
  console.log("view changed", mode, date);
};

onBeforeLightbox = (eventId: string | number) => {
  console.log("opening editor", eventId);
  return true;
};

<dhx-scheduler
  [events]="events"
  [onViewChange]="onViewChange"
  [onBeforeLightbox]="onBeforeLightbox">
</dhx-scheduler>

The wrapper exposes typed inputs for common Scheduler events and applies them through the underlying attachEvent API.

Data Transport: load, save, batchSave

data input shape:

interface AngularSchedulerDataConfig {
  load?: string | ((scheduler: SchedulerStatic) => Event[] | SerializedEvent[] | { data?: Event[] | SerializedEvent[] } | Promise<Event[] | SerializedEvent[] | { data?: Event[] | SerializedEvent[] }>);
  save?: string | RouterFunction;
  batchSave?: (changes: BatchChanges) => void;
}

load

• URL string: wrapper calls Scheduler scheduler.load(url)
• Function -> wrapper calls it with the scheduler instance and parses the returned sync/async dataset.

dataConfig = {
  load: async () => {
    const response = await fetch("/api/scheduler");
    return response.json();
  },
};

load is intended for initial loading. Use it when Scheduler owns live runtime data or when you want the wrapper to parse an initial remote dataset.

save

Per-change callback or transport wired through Scheduler data processing (wired through scheduler.createDataProcessor(save)).

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

For Scheduler event CRUD, entity is "event" and action is usually "create", "update", or "delete".

batchSave

Grouped callback for multiple changes in a short time window.

import type { BatchChanges } from "@dhx/angular-scheduler";

dataConfig = {
  batchSave: (changes: BatchChanges) => {
    if (changes.events?.length) {
      console.log("event changes", changes.events);
    }
  },
};

Queue behavior summary:

• near-term batching with a small debounce window,
• coalescing create plus update into one create with the latest payload,
• dropping create plus delete pairs,
• stripping internal !nativeeditor_status from payloads.

Custom Lightbox

Use customLightbox to replace the built-in event lightbox with an Angular component.

import { CustomLightboxComponent } from "./custom-lightbox.component";

customLightbox = CustomLightboxComponent;

<dhx-scheduler [events]="events" [customLightbox]="customLightbox"></dhx-scheduler>

The custom component receives these inputs from the wrapper:

• data
• onSave(updatedEvent)
• onCancel()
• onDelete()
• schedulerInstance

You can also pass a config object:

customLightbox = {
  component: CustomLightboxComponent,
  inputs: {
    mode: "compact",
  },
};

Templates And Angular Components

Template functions can return regular strings/HTML (native Scheduler behavior) or Angular component descriptors created with templateComponent(...).

import { templateComponent } from "@dhtmlx/trial-angular-scheduler";
import { EventTextTemplateComponent } from "./event-text-template.component";

templates = {
  event_text: (_start: Date, _end: Date, event: any) =>
    templateComponent(EventTextTemplateComponent, { event }),
};

Use this for template-capable Scheduler surfaces such as event text, event classes, scales, headers.

Markers, Filters, Views, Modals, And Event Box Rendering

These inputs are typically used to help with customizations of the Scheduler.

<dhx-scheduler
  [events]="events"
  [markers]="markers"
  [filter]="eventFilter"
  [views]="views"
  [modals]="modals"
  [eventBoxRenderer]="eventBoxRenderer">
</dhx-scheduler>

Notes:

• filter accepts a (event: Event) => boolean function or null.
• views registers Timeline, Units, or Grid configurations.
• markers are synchronized with Scheduler marked time spans.
• modals can override delete and recurrence confirmations.
• eventBoxRenderer can return a string, an HTMLElement, or an Angular template descriptor.

Exported Types And Helpers

Useful public exports from the wrapper package:

• DhxSchedulerComponent
• DhxSchedulerModule
• templateComponent(...)
• isAngularTemplateRenderable(...)
• AngularSchedulerDataConfig
• AngularSchedulerEventHandlers
• BatchChanges, DataCallbackChange
• Event, SerializedEvent
• SchedulerConfig, SchedulerXY, SchedulerPlugins
• SchedulerViewsProp, TimelineViewConfig, UnitsViewConfig, GridViewConfig
• EventFilter, EventBoxRenderer
• CustomLightboxConfig, CustomLightboxProps
• SchedulerModals
• Marker
• SchedulerStatic

Event vs SerializedEvent

• Event: use when application state stores Date objects.
• SerializedEvent: use when application state mirrors API payloads with string dates.

Pick one representation per screen to keep diffs, snapshots, and backend payloads predictable.

Continue With

• Angular Scheduler Overview
• Data Binding and State Management Basics
• RxJS State Management Tutorial
• dhtmlxScheduler with Angular