dhtmlxGantt mit Svelte
Diese Anleitung setzt grundlegende Kenntnisse der Svelte-Konzepte und -Muster voraus. Falls nicht, findest du ein hilfreiches Einstiegs-Tutorial in der Svelte-Dokumentation.
DHTMLX Gantt funktioniert gut mit Svelte. Ein funktionierendes Beispiel findest du auf GitHub: DHTMLX Gantt mit Svelte Demo.
Projekt erstellen
Bevor du ein neues Projekt startest, solltest du idealerweise Vite (optional) und Node.js installiert haben.
Um ein Svelte-Projekt einzurichten, verwenden wir Vite. Führe diesen Befehl aus:
npm create vite@latest
Weitere Details findest du im entsprechenden Artikel.
Installation der Abhängigkeiten
Navigiere anschließend in dein App-Verzeichnis. Wir nennen das Projekt gantt-svelte und wählen die Option svelte aus. Dann führe aus:
cd gantt-svelte
Nun installiere die Abhängigkeiten und starte die App mit deinem bevorzugten Paketmanager:
- Für yarn, führe aus:
yarn install
yarn dev
- Für npm, führe aus:
npm install
npm run dev
Dein Svelte-Projekt sollte jetzt unter http://localhost:5173 laufen.
Gantt erstellen
Um DHTMLX Gantt hinzuzufügen, stoppe zunächst die App mit Strg+C im Terminal. Fahre dann mit der Installation des Gantt-Pakets fort.
Schritt 1. Paketinstallation
Die PRO-Versionen der Bibliothek sind über npm/yarn aus unserem privaten Repository verfügbar. Bitte folge dieser Anleitung, um Zugriff zu erhalten.
Sobald du die Evaluierungsversion hast, installiere sie mit:
- Für npm:
npm install @dhx/trial-gantt
- Für yarn:
yarn add @dhx/trial-gantt
Alternativ, da das ZIP-Paket der Bibliothek als npm-Modul strukturiert ist, kannst du sie auch aus einem lokalen Ordner installieren.
Schritt 2. Komponentenerstellung
Erstelle als Nächstes eine Svelte-Komponente, um Gantt in deiner App einzubinden. Lege eine neue Datei namens Gantt.svelte im src/-Ordner an.
Quell-Dateien importieren
Öffne Gantt.svelte und importiere die Gantt-Quelldateien. Beachte dabei:
- Wenn du das Gantt-Paket aus einem lokalen Ordner installiert hast, sehen deine Importe so aus:
Gantt.svelte
import { Gantt} from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
- Wenn du die Trial-Version installiert hast, verwende diese Importe:
Gantt.svelte
import { Gantt} from "@dhx/trial-gantt";
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
Diese Anleitung verwendet die Trial-Version.
Container festlegen und Gantt hinzufügen
Um Gantt auf der Seite anzuzeigen, definiere einen Container für die Komponente. Hier ein Beispiel:
Gantt.svelte
<script>
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
import { onMount } from "svelte";
import { Gantt } from "@dhx/trial-gantt";
let container;
onMount(() => {
let gantt = Gantt.getGanttInstance();
gantt.init(container);
return () => {
gantt.destructor();
};
});
</script>
<div bind:this="{container}" style="width: 100%; height: 100%;"></div>
Damit der Gantt-Container den gesamten Body ausfüllt, entferne Standard-Styles aus app.css im src/-Ordner und füge Folgendes hinzu:
src/app.css
body, #app {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
}
Schritt 3. Gantt zur App hinzufügen
Füge nun die Gantt-Komponente in die App ein. Öffne src/App.svelte und ersetze den Standardinhalt mit:
src/App.svelte
<script>
import Gantt from "./Gantt.svelte";
</script>
<Gantt/>
Nach dem Starten der App sollte nun ein leerer Gantt-Chart angezeigt werden:
Schritt 4. Daten bereitstellen
Um den Gantt zu befüllen, stelle Daten bereit. Erstelle eine Datei data.js in src/ und füge Folgendes hinzu:
src/data.js
export function getData() {
const tasks = {
data: [
{
id: "10",
text: "Project #1",
start_date: "01-04-2025",
duration: 3,
order: 10,
progress: 0.4,
open: true,
},
{
id: "1",
text: "Task #1",
start_date: "01-04-2025",
duration: 1,
order: 10,
progress: 0.6,
parent: "10",
},
{
id: "2",
text: "Task #2",
start_date: "02-04-2025",
duration: 2,
order: 20,
progress: 0.6,
parent: "10",
},
],
links: [{ id: 1, source: 1, target: 2, type: "0" }],
};
return tasks;
}
Übergebe diese Daten als Props an die Gantt-Komponente in App.svelte:
App.svelte
<script>
import Gantt from "./Gantt.svelte";
import { getData } from "./data.js";
</script>
<Gantt tasks="{getData()}" />
Nutze dann die Props innerhalb der Gantt-Komponente mit gantt.parse():
Gantt.svelte
<script>
import "@dhx/trial-gantt/codebase/dhtmlxgantt.css";
import { onMount } from "svelte";
import { Gantt } from "@dhx/trial-gantt";
export let tasks;
let container;
onMount(() => {
let gantt = Gantt.getGanttInstance();
gantt.init(container);
gantt.parse(tasks);
return () => {
gantt.destructor();
};
});
</script>
<div bind:this="{container}" style="width: 100%; height: 100%;"></div>
Nach dem Neuladen der App sollte nun ein Gantt-Chart mit Aufgaben angezeigt werden:
Schritt 5. Daten speichern
Um Änderungen im Gantt zu verfolgen, kannst du einen dataProcessor-Handler verwenden. Dieser erleichtert die Kommunikation mit dem Backend und kann als Funktion oder Router-Objekt definiert werden. dhtmlxGantt unterstützt Promise-Antworten, um Aktionen korrekt zu verarbeiten.
Erstelle einen DataProcessor mit createDataProcessor(), um Änderungen wie folgt abzufangen:
gantt.createDataProcessor(function(entity, action, data, id) {
gantt.message(`${entity} ${action}`);
});
Falls dein Backend nach dem Erstellen neuer Datensätze die Task-IDs ändert, stelle sicher, dass das Promise ein Objekt mit (id: databaseId) oder (tid: databaseId) zurückgibt, damit Gantt den Datensatz entsprechend aktualisieren kann. Weitere Details zur Server-seitigen Integration findest du hier.
Damit ist dein Svelte Gantt-Setup bereit. Du kannst das vollständige Demo auf GitHub erkunden: https://github.com/DHTMLX/svelte-gantt-demo.
XSS-, CSRF- und SQL-Injection-Angriffe
Es ist wichtig zu beachten, dass Gantt keinen eingebauten Schutz gegen Bedrohungen wie SQL-Injection, XSS oder CSRF-Angriffe bietet. Die Absicherung deiner Anwendung gegen solche Risiken liegt in der Verantwortung der Backend-Entwickler.
Weitere Informationen zu potenziellen Schwachstellen und empfohlenen Sicherheitspraktiken findest du im Artikel Application Security.