DHTMLX Gantt Überblick
DHTMLX Gantt ist eine JavaScript-Komponente zur Anzeige und Bearbeitung von Projektzeitplänen im Browser.
Sie kombiniert ein konfigurierbares Grid, eine zoombare Zeitskala und eine Scheduling-Engine, die Arbeitszeiten, Abhängigkeiten und Einschränkungen versteht.
Sie können damit Projekt- und Ressourcenplanungsansichten für Projektmanagement-Tools, Bau- und Produktionspläne, Einsatzplanung im Außendienst und jede andere Anwendung erstellen, die eine visuelle Projektzeitleiste benötigt.
DHTMLX Gantt ist in den Editionen Standard und PRO verfügbar. Die PRO-Edition umfasst Funktionen wie Auto-Scheduling, kritischen Pfad, Ressourcenmanagement, dynamisches Laden und mehr.
Schnellstart nach Framework
Sie können DHTMLX Gantt als Vanilla-JavaScript-Widget verwenden oder in moderne Frameworks integrieren. Starten Sie mit einer Schritt-für-Schritt-Anleitung für Ihren Stack:
Minimales Setup über Script-Tags oder Bundler. Ideal für einfache Seiten oder nicht-frameworkbasierte Apps.
Verwenden Sie die fertige ReactGantt-Komponente mit Props und Events.
Integrieren Sie Gantt in Angular-Projekte mit einem schlanken Wrapper.
Fügen Sie Vue-Apps ein Gantt-Diagramm mit einem kleinen Wrapper und reaktiven Props hinzu.
Nutzen Sie Gantt in Svelte mit einer einfachen Komponente, die Konfiguration und Events bindet.
Betten Sie das Kern-Gantt-Widget in eigene Komponenten ein, um den Lebenszyklus und Datenfluss vollständig zu kontrollieren.
Binden Sie Gantt in Salesforce-Apps ein, verbinden Sie es mit Ihren Org-Daten und verwalten Sie Projektzeitpläne im CRM.
Live-Demos
Um DHTMLX Gantt in Aktion zu sehen, besuchen Sie die Online-Demos:
- Grundlegendes Gantt-Diagramm mit Aufgaben und Verknüpfungen.
- Beispiele für Auto-Scheduling und kritischen Pfad.
- Ressourcenmanagement: Diagramm und Histogramm.
- Alle Beispiele durchsuchen für den kompletten Funktionsumfang.
Zentrale Funktionen
DHTMLX Gantt kombiniert eine Scheduling-Engine, eine flexible Zeitleiste und Ressourcenwerkzeuge. Die folgenden Abschnitte heben die wichtigsten Bereiche hervor und führen zu detaillierten Kapiteln.
Projektplanung
DHTMLX Gantt enthält eine Scheduling-Engine, die Projektstruktur und Arbeitszeiten versteht:
- Aufgabentypen und Abhängigkeiten - drei zentrale Aufgabentypen (Task, Summary, Meilenstein) mit Abhängigkeiten.
- Arbeitszeitkalender auf Projekt-, Aufgaben- und Ressourcenebene.
- Auto-Scheduling und kritischer Pfad zur Neuberechnung von Plänen und Hervorhebung der Aufgaben, die das Projektende bestimmen.
Das Scheduling-Verhalten ist konfigurierbar, sodass Sie es an interne Regeln oder Tools wie MS Project anpassen können.
Zeitleiste & Grid
Die Komponente kombiniert ein Grid links mit einer zoombaren Zeitskala rechts; beide Bereiche sind hochgradig anpassbar:
- Flexible Layouts mit zusätzlichen Grids, Spalten rechts und benutzerdefinierten Panels.
- Konfigurierbare Spalten mit Inline-Editing, Mehrfachauswahl, Drag-and-Drop und Tastaturnavigation.
- Anpassbare Zeitskala mit Markern und hervorgehobenen Zeitbereichen.
Erweiterte Projektkontrollen
Für detailliertere Projektverfolgung unterstützt Gantt:
- Baselines und Deadlines, um geplante und aktuelle Daten zu vergleichen.
- Nicht terminierte Aufgaben und Split-Tasks für unvollständige oder unterbrochene Arbeit.
- Undo/Redo für sicheres Bearbeiten.
Ressourcen- & Arbeitsbelastungsmanagement (PRO)
Die PRO-Edition bietet eine zusätzliche Ressourcenebene:
- Ressourcenzuweisungen zu Aufgaben.
- Ressourcen-Histogramm und Belastungsdiagramme.
- Gruppierung von Aufgaben nach Ressourcen zur Übersicht „Wer macht was".
Damit wird das Gantt-Diagramm zu einem Basiswerkzeug für Ressourcensteuerung in Ihrer Anwendung.
Export & Ökosystem
DHTMLX Gantt integriert sich in externe Tools und bietet zahlreiche Import-/Exportmöglichkeiten:
- Export nach PDF/PNG und Excel (inkl. Node.js-Exportmodul).
- Export/Import zu MS Project und Primavera (über Exportservice).
Framework- und Backend-Integration
Frontend-Integration
DHTMLX Gantt ist ein Framework-unabhängiges Vanilla-JS-Widget für moderne Browser. Es kann verwendet werden:
Für React gibt es zwei Optionen:
- Verwenden Sie den offiziellen ReactGantt-Wrapper, der Gantt als deklarative React-Komponente mit Props und Events bereitstellt - ideal für neue React-Projekte.
- Oder folgen Sie der Low-Level-React-Integration für volle Kontrolle über Initialisierung, Zerstörung und Datenfluss.
Für Angular, Vue und Svelte erklären die jeweiligen How-to-start-Guides, wie man einen dünnen Wrapper erstellt, der zur Architektur Ihrer App passt.
Backend-Integration
Auf Backend-Seite kommuniziert Gantt über eine REST-ähnliche API:
- Daten werden typischerweise als JSON (Tasks, Links, Ressourcen, Zuordnungen) geladen und gespeichert.
- Der integrierte DataProcessor hilft beim Routing von Create/Update/Delete-Operationen.
- Es gibt Tutorials für populäre Backends (Node.js, .NET Core, Laravel, etc.), die CRUD-Operationen und Best Practices für Datenabgleich abdecken.
So lässt sich Gantt problemlos in bestehende Systeme oder neue Microservices integrieren.
Wie geht es weiter?
Wenn Sie gerade erst beginnen:
- Folgen Sie einem How-to-start-Guide für Ihr bevorzugtes Frontend-Framework oder Vanilla JS.
- Passen Sie Grid-Spalten, Arbeitszeitkalender, Skalen und Editierverhalten an.
- Verbinden Sie das Backend - richten Sie den DataProcessor und REST-Endpunkte für Tasks, Links und Ressourcen ein.
- Erkunden Sie Guides und die API-Referenz für tiefere Anpassungen (Templates, Events, Erweiterungen).
Wenn Sie DHTMLX Gantt bereits nutzen und von einer früheren Version aktualisieren, finden Sie in What's new die Release Notes und einen Überblick über neue Funktionen und Migrationshinweise.