DHTMLX Scheduler Überblick

DHTMLX Scheduler ist eine JavaScript-Komponente für Event-Kalender, mit der Sie Zeitpläne im Browser anzeigen und bearbeiten können. Sie unterstützt klassische Kalenderansichten (Tag/Woche/Monat/Jahr), umfangreiche Event-Bearbeitung (Erstellen/Größe ändern/Verschieben per Drag-and-Drop + Lightbox), wiederkehrende Serien sowie erweiterte Ansichten für die Ressourcenplanung (Timeline/Units in PRO).

DHTMLX Scheduler ist in den Editionen Standard und PRO verfügbar. Die Standard-Edition wird über öffentliche Paketquellen bereitgestellt, während PRO/Evaluation über eine private npm-Registry installiert werden kann (oder manuell hinzugefügt werden kann).

Schnellstart nach Framework

Sie können DHTMLX Scheduler als Vanilla-JavaScript-Widget verwenden oder in ein modernes Framework integrieren. Starten Sie mit einer schrittweisen „Erste Schritte“-Anleitung, die zu Ihrem Stack passt:

JavaScript

Minimales Setup mit Script-Tags oder Bundlern.

React

Verwenden Sie die fertige ReactScheduler-Komponente mit Props und Events.

Angular

Integrieren Sie Scheduler über einen schlanken Wrapper in Angular-Projekte.

Vue

Verwenden Sie Scheduler in Vue-Apps mit einem kleinen Wrapper und reaktiver Konfiguration.

Svelte

Betten Sie Scheduler in Svelte mit einer einfachen Komponente ein, die Konfiguration und Events bindet.

React

Betten Sie das zentrale Scheduler-Widget in Ihre eigenen Komponenten ein, um den Lebenszyklus und den Datenfluss vollständig zu steuern.

Salesforce

Verwenden Sie Scheduler in Salesforce Lightning Web Components und verbinden Sie ihn mit Ihren Org-Daten.

Live-Demos

Um DHTMLX Scheduler in Aktion zu sehen, erkunden Sie die Online-Demos:

• Grundlegende Initialisierung (Wochenansicht).
• Wiederkehrende Ereignisse.
• Performance der Timeline-Ansicht (horizontaler Bildlauf).
• Templates-Beispiel.
• Alle Samples durchsuchen.

Zentrale Funktionen

DHTMLX Scheduler konzentriert sich auf interaktive Kalender-UX und Erweiterbarkeit. Die folgenden Abschnitte heben die wichtigsten Bereiche hervor und verweisen auf weiterführende Kapitel.

Kalenderansichten und Navigation

Scheduler bietet mehrere Möglichkeiten, Zeit und Ereignisse zu visualisieren:

• Integrierte Kalenderansichten (Tag/Woche/Monat/Jahr/Agenda-Varianten). Einen allgemeinen Überblick finden Sie unter Ansichten.
• Konfigurierbare Navigation/Header und responsive Initialisierung über scheduler.config.header.

Erstellen und Bearbeiten von Ereignissen

Scheduler ist für eine „Kalender-zuerst“-Bearbeitung konzipiert:

• Interaktionen zum Erstellen, Vergrößern/Verkleinern und Verschieben per Drag-and-Drop (konfigurierbar).
• Integrierter Editor (Lightbox) und optionale Quick Info-Popups über Erweiterungen.
• Templates für Ereignistext, Tooltips, Header und UI-Fragmente (für vollständige Kontrolle über das Rendering).

Wiederkehrende Serien und Ausnahmen

Wiederkehrende Ereignisse werden über eine dedizierte Erweiterung und ein modernes Wiederholungsformat unterstützt. Siehe Wiederkehrende Ereignisse.

Ansichten für Ressourcenplanung (PRO)

PRO ergänzt erweiterte Planungsmodi, die häufig für die Ressourcenplanung verwendet werden:

• Timeline-Ansicht, Units-Ansicht, Week Agenda, Grid-Ansicht und weitere PRO-exklusive Erweiterungen.
• Ereignisse mit mehreren Bereichen (ein Ereignis mehreren Ressourcen/Bereichen zuweisen) über die Erweiterung Multisection.

Daten laden, Formate und Synchronisierung

Scheduler kann auf verschiedene Weise mit Ihrer Datenebene verbunden werden:

• Laden Sie Daten aus Ihrem Backend und halten Sie sie synchron (gängige Muster verwenden eine REST-ähnliche API + DataProcessor).
• Serverseitige Erste Schritte-Anleitungen gibt es für mehrere Stacks (Node, ASP.NET Core, PHP/Laravel, Ruby usw.).

Frameworks und Backend-Integration

Frontend-Integration

Scheduler kann verwendet werden:

• Als eigenständiges JS-Widget auf jeder Seite - Initialisierung mit reinem HTML/JS.
• Eingebettet in Framework-Komponenten über die Erste Schritte-Anleitungen für React/Angular/Vue/Svelte.

Hinweise zur Installation

• Standard-Edition:
  • npm install dhtmlx-scheduler
  • oder über CDN einbinden.
• PRO/Evaluation:
  • über eine private npm-Registry installieren oder das Paket manuell/aus einem lokalen Ordner hinzufügen, siehe Installationsanleitung.

Nächste Schritte

Wenn Sie gerade erst beginnen:

1. Wählen Sie eine Anleitung aus Schnellstart nach Framework oder starten Sie mit Initialisierung mit reinem HTML/JS.
2. Konfigurieren Sie Ihre UI: Header, Ansichten, Templates und Bearbeitungsregeln.
3. Aktivieren Sie die benötigten Erweiterungen - Recurring, Timeline/Units in PRO, Quick Info, Tooltip usw.
4. Verbinden Sie Ihr Backend mithilfe der Anleitungen zur Server-Side Integration.
5. Erkunden Sie Guides und die API-Referenz für weitergehende Anpassungen.

Wenn Sie ein Upgrade durchführen, sehen Sie sich Was ist neu und die Migrationsanleitungen in der Dokumentation an.