dhtmlxGantt in Plain JS/HTML

Wenn Sie an einer App mit dhtmlxGantt arbeiten, ist das Erste, was Sie tun müssen, es einzurichten oder, einfacher gesagt, das Gantt-Diagramm auf der Seite anzuzeigen.

Diese Anleitung erklärt, wie man dhtmlxScheduler nur mit einfachem JS und HTML einrichtet. Wenn Sie ein Frontend-Framework verwenden, gibt es dafür separate Anleitungen:


Angular	React	Svelte	Vue.js

Erstellen eines einfachen Gantt-Diagramms

Um ein einfaches Gantt-Diagramm auf Ihrer Seite zum Laufen zu bringen, müssen Sie nur drei Schritte befolgen:

Fügen Sie die dhtmlxGantt-Code-Dateien zu Ihrer Seite hinzu.
Richten Sie ein DIV-Container in Ihrem HTML ein.
Verwenden Sie die gantt.init()-Methode, um dhtmlxGantt in diesem Container zu initialisieren. Diese Methode nimmt einen HTML-Container oder dessen ID als Parameter, wo das Gantt-Diagramm erscheinen wird.

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body>
    <div id="gantt_here" style='width:1000px; height:400px;'></div>
    <script type="text/javascript">        gantt.init("gantt_here");
    </script>
</body>
</html>

desktop/init_gantt_front.png

Related sample: Basic initialization

Hinzufügen von Gantt-Quelldateien zu Ihrem Projekt

Es gibt mehrere Möglichkeiten, Gantt-Dateien in Ihr Projekt einzubinden, abhängig von der Art der App, die Sie entwickeln:

Dateien mit dem <script>-Tag hinzufügen
Dateien in ES6/7- und TypeScript-Apps importieren
Dateien in einer RequireJS-basierten App einbinden

Einbinden von Dateien über das <script>-Tag

Um dhtmlxGantt zu verwenden, müssen Sie zwei Dateien einbinden:

dhtmlxgantt.js
dhtmlxgantt.css

<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">

Das dhtmlxGantt-Paket hat eine spezifische Struktur, daher ist es hilfreich zu wissen, wo sich diese Dateien befinden:

sources: Enthält den Quellcode der Bibliothek, der nicht minimiert ist und leichter zu lesen ist. Dies ist hauptsächlich für das Debugging.
samples: Beinhaltet Codebeispiele.
docs: Enthält die vollständige Dokumentation.
codebase: Hält die optimierten Dateien für die Produktion. Verwenden Sie Dateien aus diesem Ordner in Ihren Apps.

Importieren von Dateien in ES6/7- und TypeScript-Apps

Um Gantt-Dateien zu importieren, verwenden Sie diesen Befehl:

import { gantt } from 'dhtmlx-gantt';

Wenn Sie die Commercial-, Enterprise- oder Ultimate-Version haben, sieht der Befehl folgendermaßen aus:

import { gantt, Gantt } from 'dhtmlx-gantt';

Verwendung von Gantt mit Vite

Für Projekte, die Vite verwenden, müssen Sie die vite.config.js-Datei anpassen, um sicherzustellen, dass Gantt ordnungsgemäß eingebunden ist:

vite.config.js

optimizeDeps: {
    include: [
        'dhtmlx-gantt',
    ]
}

Svelte Produktions-Build

Wenn Sie Gantt in einer Svelte-App verwenden, fügen Sie diese Einstellung für Produktions-Builds zur vite.config.js hinzu. Aktualisieren Sie den Pfad gantt_8.0.6_evaluation entsprechend Ihrem Gantt-Ordner:

vite.config.js

build: {
    commonjsOptions: {
        include: [
            "node_modules",
            "gantt_8.0.6_evaluation/codebase/dhtmlxgantt.js"
        ]
    },
}

Einbinden von Dateien in einer RequireJS-basierten App

Um dhtmlxGantt in einer RequireJS-basierten App einzubinden, folgen Sie diesem Beispiel:

requirejs(["codebase/dhtmlxgantt"], function(dhx){
  var gantt = dhx.gantt;
  var Gantt = dhx.Gantt; // für Enterprise-Builds
 
  gantt.init("gantt_here");
  gantt.parse({
    data: [
      { id:1, text:"Project #2", start_date:"01-04-2018", 
        duration:18, progress:0.4, open:true },
      { id:2, text:"Task #1", start_date:"02-04-2018", 
        duration:8, progress:0.6, parent:1 },
      { id:3, text:"Task #2", start_date:"11-04-2018", 
        duration:8, progress:0.6, parent:1 }
    ],
    links: [
      { id:1, source:1, target:2, type:"1" },
      { id:2, source:2, target:3, type:"0" }
    ]
  });
});

Die dhtmlxGantt-Bibliothek stellt ein Objekt mit den Feldern gantt und Gantt (für Commercial-, Enterprise- oder Ultimate-Versionen) bereit, wie hier beschrieben.

Wenn Sie Gantt mit benutzerdefinierten Erweiterungen in RequireJS verwenden, stellen Sie sicher, dass Sie die shim-Konfiguration für RequireJS angeben und die Abhängigkeit der Erweiterungen von Gantt definieren.

Hier ist ein Beispiel, wie man eine benutzerdefinierte Erweiterungsdatei custom_tooltip_plugin.js einrichtet:

requirejs.config({
  paths: {
    "dhtmlxgantt": "../../codebase/dhtmlxgantt",
    "ext/dhtmlxgantt_custom_tooltip": "../custom_tooltip_plugin"
  },
  shim: {
    "ext/dhtmlxgantt_custom_tooltip": ["dhtmlxgantt"]
  }
});
 
requirejs(["dhtmlxgantt"], 
function (dhx) {
  var gantt = dhx.gantt;
 
  var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
  var today = new Date(2018, 3, 5);
  gantt.addMarker({
    start_date: today,
    css: "today",
    text: "Heute",
    title: "Heute: " + date_to_str(today)
  });
 
  gantt.init("gantt_here");
  gantt.parse({
    data: [
      { id:1, text:"Project #2", start_date:"01-04-2018",
        duration:18, progress:0.4, open:true },
      { id:2, text:"Task #1", start_date:"02-04-2018", 
        duration:8, progress:0.6, parent:1 },
      { id:3, text:"Task #2", start_date:"11-04-2018", 
        duration:8, progress:0.6, parent:1 }
    ],
    links: [
      { id:1, source:1, target:2, type:"1" },
      { id:2, source:2, target:3, type:"0" }
    ]
  });
});

Stellen Sie sicher, dass der Modulname für jede Datei im Paket als relativer Pfad innerhalb des 'codebase'-Ordners plus Dateiname angegeben ist. Zum Beispiel:

Kernbibliothek:

"dhtmlxgantt": "./vendor/dhtmlxgantt/dhtmlxgantt"

Vollbildmodus

Um das Gantt-Diagramm im Vollbildmodus in verschiedenen Browsern ordnungsgemäß anzuzeigen, fügen Sie diesen Stil zu Ihrer Seite hinzu:

<style type="text/css" media="screen">    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }
</style>

Zurück nach oben