DHTMLX Scheduler Überblick
DHTMLX Scheduler ist eine hochgradig konfigurierbare JavaScript-Ereignis-Kalender-Komponente, komplett mit TypeScript-Definitionen. Sie ist darauf ausgelegt, Zeitpläne direkt im Browser anzuzeigen, zu bearbeiten und zu verwalten. Die Komponente lässt sich mit React, Angular, Vue und anderen Frontend-Frameworks integrieren. DHTMLX Scheduler unterstützt auch AI-gestützte Entwicklung durch den DHTMLX MCP Server, Agent Skills und eine strukturierte API.
Sie können sie in Projektmanagement, CRM, Buchungssystemen, Gesundheitswesen, Bildung, Außendienst, SaaS und anderen Geschäftsapplikationen einsetzen, die einen interaktiven Kalender, einen Terminplaner oder eine Ressourcenplanungs-Timeline erfordern.
Schneller Einstieg nach Framework
Sie können DHTMLX Scheduler als Vanilla-JavaScript-Widget verwenden oder es in ein modernes Framework integrieren. Beginnen Sie mit einer schrittweisen Anleitung, die zu Ihrem Stack passt:
React, Angular und Vue unterstützen zwei Integrationsansätze:
- Vorgefertigte Wrapper für React Scheduler, Angular Scheduler und Vue Scheduler (empfohlen für PRO- und Evaluierungsprojekte)
- Direkte Integration der Kern-JavaScript Scheduler-Komponente mit React, Angular, Vue (Standardedition)
Live-Demos
Um DHTMLX Scheduler in Aktion zu sehen, erkunden Sie einige der beliebtesten Demos:
- Grundlegende Initialisierung (Wochenansicht)
- Wiederkehrende Ereignisse und Leistung der Timeline-Ansicht Beispiele
- Beispiele für Vorlagen
View Alle Beispiele to check the full range of Scheduler features.
Für frameworkorientierte Startpunkte sehen Sie sich die Beispiel-Repositories für React, Angular und Vue an.
Einige Beispiele demonstrieren PRO-Funktionalität, daher prüfen Sie vor der Wiederverwendung in einem Standard-Edition-Projekt den Standard- vs PRO-Vergleich.
Entwicklerressourcen
- Installationsanleitung für Standard-, Trial- und PRO-Setup-Flows
- Standard- vs PRO-Vergleich zu Funktionsunterschieden zwischen Editionen
- Öffentliches npm-Paket des JavaScript Scheduler unter der Standardedition
- GitHub-Repository für den Quellcode der Standardedition und das Issue-Tracking
- API-Referenz und Beispiele für Implementierungsdetails
- Was gibt es Neues zu Releases und Migrationhinweisen
Scheduler-Funktionen im Fokus
DHTMLX Scheduler bietet mehrere Kalenderversionen, umfangreiche Ereignisbearbeitung und Ressourcenplanungstools.
Kalenderansichten und Navigation
Im Kern rendert Scheduler klassische Kalenderansichten und ermöglicht Benutzern, durch die Zeit zu navigieren. Es enthält:
- Day, Week, Month, Year und Agenda-Ansichten zur Visualisierung von Zeitplänen in jeder Skala.
- Anpassbare Kopfzeile mit Navigationsoptionen und Ansichtentabs.
Ereigniserstellung und Bearbeitung
Die Komponente bietet eine "Kalender-zuerst"-Bearbeitung, d. h. Benutzer können Ereignisse direkt im Kalender schnell erstellen oder aktualisieren:
- Drag-create, drag-resize und drag-move-Interaktionen für Ereignisse innerhalb des Schedulers.
- Flexibler Lightbox-Editor für vollständige Ereignisdetails, plus optionale Quick Info Popups für schnelle Bearbeitungen.
- Drag-and-Drop über Scheduler-Grenzen hinweg zum Verschieben von Ereignissen zwischen verschiedenen Scheduler-Instanzen.
- Drag-and-Drop-Integration mit externen Quellen zum Ziehen von Datensätzen aus separaten Komponenten in den Scheduler als neue Ereignisse.
- Multi-User-Live-Updates für kollaborative Planungs-Szenarien.
Wiederkehrende Serien und Ausnahmen
Wiederkehrende Ereignisse werden über eine dedizierte Erweiterung unterstützt und iCalendar-kompatibles RFC 5545-Rekurrenzformat:
- Wiederkehrende Ereignisse mit Ausnahmen pro Vorkommen.
- Validierung und Kollisionen-Vermeidung, um Zeitpläne konsistent zu halten.
Ressourcenplanungsansichten (PRO)
Für Teams, die mehr als einen einfachen Kalender benötigen, bietet die PRO-Edition fortgeschrittene Planungsmodi:
- Timeline und Units Ansichten für Ressourcenplanung.
- Week Agenda und Grid Ansichten für kompakte, Listen-artige Planung.
- Multi-Section-Ereignisse, die ein Ereignis mehreren Ressourcen zuweisen.
Export und Ökosystem
Teams müssen oft Zeitpläne teilen, lokale Backups behalten oder mit externen Kalendern synchronisieren. DHTMLX Scheduler lässt sich mit externen Tools und Ausgabeformaten integrieren, indem er unterstützt:
- Export nach PDF, PNG, Excel and iCal.
- Zwei-Wege-Synchronisation mit Google Calendar.
Anpassung und Styling
Das Erscheinungsbild des Kalenders kann auf jeder Ebene angepasst werden, von einem vollständigen Theme bis hin zu einer einzelnen Ereignis-Box:
- Eine Reihe integrierter Skins mit Unterstützung für umfangreiche Anpassungen und die Erstellung neuer Themes.
- Vorlagen für Event-Inhalte, Header, Tooltips und weitere UI-Elemente.
- Unterstützung für Lokalisierung (Sprache der Benutzeroberfläche sowie Datums- und Zeitformate) sowie RTL-Modus.
Editionen und Lizenzierung
DHTMLX Scheduler ist in zwei Editionen erhältlich: Standard und PRO. Sie können mit der kostenfreien Standardedition beginnen und später auf die PRO Edition upgraden, falls Sie mehr Funktionen, offiziellen Support und eine vollständig gepflegte Scheduler-Grundlage benötigen. Sie können auch direkt mit der PRO Edition starten, entweder durch eine offizielle Testversion oder mit einer kostenpflichtigen Lizenz. Wählen Sie eine der folgenden Optionen, um mit DHTMLX Scheduler zu starten:
- Standard Edition. Veröffentlicht über öffentliche Paketquellen (npm, CDN); deckt die Kernfunktionen des interaktiven Kalenders ab.
- Offizielle Testversion. Ermöglicht es Ihnen, den vollständigen PRO-Funktionsumfang zu testen und technischen Support während der Testphase zu erhalten.
- PRO-Edition. Für Produktionsumgebungen gedacht, enthält fortschrittliche Planungsfunktionen, offiziellen Support und kommerzielle Lizenzen. Sie wird aus einem privaten npm-Registrierungsdienst installiert oder manuell hinzugefügt.
Um die genauen Funktionsunterschiede zwischen Editionen zu sehen, prüfen Sie den Standard vs PRO comparison. Für den Installationsablauf jeder Option lesen Sie die Installationsanleitung.
Die Standard-Edition steht nur unter der GNU GPL v2-Lizenz zur Verfügung. Um DHTMLX Scheduler in Nicht-GPL-Projekten zu verwenden (und die PRO-Version des Produkts zu erhalten), erwerben Sie bitte eine Individual-, Commercial-, Enterprise-, Ultimate- oder Startup-Lizenz auf unserer Website oder kontaktieren Sie uns unter sales@dhtmlx.com.
KI-Programmierwerkzeuge
Für AI-gestützte Entwicklung beginnen Sie mit den speziellen Guides für Codierhilfen:
Backend-Integration
DHTMLX Scheduler ermöglicht es Ihnen, sich mit jedem Backend zu verbinden, indem Sie eine RESTful-API auf dem Server implementieren:
- Daten für Ereignisse und deren Wiederholungsregeln werden typischerweise im JSON-Format geladen und gespeichert.
- Der integrierte DataProcessor unterstützt die Weiterleitung von Erstellungs-, Aktualisierungs- und Löschvorgängen an Ihren Server.
- Es gibt Tutorials für beliebte Backend-Plattformen und Frameworks (Node.js, ASP.NET Core, Laravel, Ruby on Rails, usw.), die CRUD-Operationen und Best Practices für das Abgleichen des Scheduler mit Ihrer Datenbank abdecken.
Was kommt als Nächstes
Wenn Sie gerade mit DHTMLX Scheduler beginnen, gehen Sie wie folgt vor:
- Konsultieren Sie die Anleitung für den Einstieg für Ihr bevorzugtes Frontend-Framework oder für reines JavaScript.
- Konfigurieren Sie Header, Ansichten, Vorlagen und das Bearbeitungsverhalten über die Lightbox.
- Aktivieren Sie die benötigten Erweiterungen, wie z. B. Wiederkehrende Termine, Zeitleiste/Einheiten (in der PRO-Version), Kurzinfos oder Tooltips.
- Stellen Sie die Verbindung zu Ihrem Backend her und richten Sie die serverseitige Integration sowie die Anwendungsendpunkte für Termine ein.
- Nutzen Sie die Anleitungen und die API-Referenz für weitergehende Anpassungen, etwa bei Vorlagen, Ereignissen und Erweiterungen.
Wenn Sie DHTMLX Scheduler bereits verwenden und von einer älteren Version upgraden, prüfen Sie Was gibt es Neues für Release-Notes und eine Zusammenfassung der neuesten Funktionen und Migration Guides What's New.