Custom Gantt

Das arcGantt Widget ist ein interaktives Tool zur grafischen Planung und Verwaltung von beispielsweise Projekten, Aufgaben und Zeiträumen. Es ermöglicht eine klare Balkendarstellung von Zeitverläufen, unterstützt hierarchische Strukturen und bietet eine dynamische Steuerung per Klick.

Typische Einsatzbereiche:

✔ Projektmanagement – Aufgaben & Deadlines verwalten

✔ Ressourcenplanung – Verfügbarkeiten im Blick behalten

✔ Einsatzplanung – Teams & Termine effizient organisieren

Das Widget lässt sich flexibel in deiner Ninox Datenbank integrieren und auf deinen Anwendungsfall anpassen. In den folgenden Abschnitten erfährst du, wie du das Widget konfigurierst. 🚀

Anwendungscode

let data := {
		uniqueId: "Projekt Gantt",
		ganttSettings: {
            height: "800px",
            embedded: false, 
			showScrollbar: true,
			currentZoomLevel:  500,
            nativeCollapse: true, 
		},
    	dateSettings: {
			highlights: [{
					title: "Feiertag",
					date: date(2024, 1, 1),
					backgroundColor: "",
					color: "#fff"
				}, {
					title: "Heute",
					date: today(),
					backgroundColor: "#e9595c10",
					color: "#fff"
				}, {
					title: "Samstag",
					weekday: 6,
					backgroundColor: "",
					color: "#fff"
				}, {
					title: "Sonntag",
					weekday: 7,
					backgroundColor: "",
					color: "#fff"
				}]
		},
		timeSettings: {
			amount: 1,
			startTime: 6,
			duration: 12
		},
  		createModeSettings: {
			show: false, 
            amount: 2
		},
		barSettings: {
			height: "40px",
			borderRadius: "10px"
		},
		sidebarSettings: {
			width: "400px",
			title: "Einsatzplanung",
			clickActions: [{
					title: "Heute",
					date: today(), 
                    position: ""
				}, {
					title: "Q1",
					date: date(2024, 1, 1), 
                    position: ""
				}, {
					title: "Q2",
					date: date(2024, 4, 1), 
                    position: ""
				}, {
					title: "Q3",
					date: date(2024, 7, 1), 
                    position: ""
				}, {
					title: "Q4",
					date: date(2024, 10, 1), 
                    position: ""
				}, {
					title: "Christmas",
					date: date(2024, 12, 24), 
                    position: ""
				}]
		},
		years: [2025,2026,2027],
		items: (select Projekte where Aktiv=true).[{
				recordId: Nr,
				title: Name,
				backgroundColor: "",
				height: "100px",
				barSettings: {
					height: "20px",
					borderRadius: "50px", 
                    borderColor: "",
                    backgroundColor: ""
                },
				clickAction:true, 
				timeEntries: [{
						title: Name,
						recordId: Nr,
						startDate: min(Aufgaben.Startdatum),
						endDate: max(Aufgaben.Enddatum),
						clickAction: true, 
                        barSettings: {
        					height: "20px",
        					borderRadius: "50px", 
                            borderColor: "",
                            backgroundColor: ""
                        },
					}],
				items: Aufgaben.[{
						recordId: Nr,
						title: "Aufgaben",
                        backgroundColor: "",
        				height: "100px",
						barSettings: {
							height: "20px",
							borderRadius: "4px", 
                            borderColor: "",
                            backgroundColor: ""
						},
						timeEntries: [{
								recordId: Nr,
								title: Aufgabe.Bezeichnung,
								startDate: Startdatum,
								endDate: Enddatum,
								startTime: Startzeit,
								endTime: Endzeit,
								clickAction: true, 
                                barSettings: {
                					height: "20px",
                					borderRadius: "50px", 
                                    borderColor: "",
                                    backgroundColor: ""
                                },
							}]
					}]
			}]
	};
arcCustomGantt(data)

Einzelne Parameter

uniqueId

uniqueID ist die individuelle Bezeichnung deines Gantts. Achte darauf, dass du hier einen einzigartigen Titel vergibst. Das ist wichtig, falls du mehrere Gantts auf einer Seite darstellen möchtest und sich keine Style-Einstellungen überschreiben.

uniqueId: "Projekt Gantt",

ganttSettings Block

Der Block ganttSettings enthält allgemeine Anzeigeeinstellungen für das Gantt-Diagramm – also wie das Gantt selbst dargestellt wird, unabhängig von seinen Inhalten.

		ganttSettings: {
            height: "800px",
            embedded: false, 
			showScrollbar: true,
			currentZoomLevel:  500,
            nativeCollapse: true, 
		},

height im ganttSettings Block

height bestimmt die Höhe des Gantt-Diagramms in Pixeln. Beispiel: "800px"

  height: "", // default: auto
  height: "800px" // Pixel-Werte angeben

embedded im ganttSettings Block

Mit dem Parameter embedded legst du fest, ob dein Gantt-Diagramm eigenständig angezeigt oder in ein anderes Widget eingebettet wird.

embedded: "", // default: false
embedded: true, // Gib hier true an, wenn du das Gantt in andere Widgets integrierst. 

showScrollbar im ganttSettings Block

Mit showScrollbar bestimmst du, ob unterhalb des Gantt-Diagramms eine horizontale Scrollbar angezeigt wird.

Das ist besonders hilfreich für User ohne Touchpad oder Maus mit horizontalem Scrollrad – sie können dann bequem per Klick auf der Scrollbar im Zeitraster nach rechts oder links navigieren.

showScrollbar: "", // default: false 
showScrollbar: true,

currentZoomLevel im ganttSettings Block

Mit currentZoomLevel legst du die Zoomstufe deines Gantt-Diagramms fest. Der Wert wird als Prozentzahl angegeben.

• Ein höherer Wert (z. B. 500) bedeutet eine stärkere Vergrößerung – die einzelnen Zeitblöcke im Grid werden größer dargestellt.

• Ein niedrigerer Wert (z. B. 100) zeigt mehr Zeitraum auf einmal, aber in kleinerem Maßstab.

So kannst du steuern, wie detailliert oder wie übersichtlich dein Gantt beim Laden angezeigt wird.

currentZoomLevel:  "", // default: 100
currentZoomLevel:  500,

nativeCollapse im ganttSettings Block

Mit nativeCollapse steuerst du, ob die standardmäßigen Auf- und Zuklapp-Icons für hierarchische Gantt-Einträge automatisch angezeigt werden.

• true → Die Gantt-Komponente zeigt automatisch die bekannten Pfeil-Icons zum Ein- und Ausklappen von Gruppen oder Unterpunkten.

• false → Du übernimmst selbst die Kontrolle über die Darstellung und Funktion – z. B. mit eigenen Icons und Klick-Logiken.

Das ist besonders nützlich, wenn du ein individuelles Verhalten oder Design für die Aufklappfunktion brauchst.

nativeCollapse: "", // default: true
nativeCollapse: false,

Wenn du nativeCollapse auf false setzt, kannst du eine eigene Logik zum Ein- und Ausklappen deiner Gantt-Einträge umsetzen.

Dazu steuerst du die Anzeige der untergeordneten Items mithilfe einer if-Bedingung, die auf ein Hilfsfeld wie z. B. showChildren zugreift:

items: if showChildren=true then Aufgaben.[{
			...
		}] end

Diese Methode ist nicht nur flexibel, sondern auch performancefreundlich: Unterelemente werden nur geladen und angezeigt, wenn sie tatsächlich sichtbar sein sollen – das reduziert Ladezeiten und sorgt für flüssigere Interaktionen im Gantt.

dateSettings Block

Mit dem dateSettings-Block kannst du bestimmte Tage oder Daten im Gantt-Grid visuell hervorheben – z. B. Feiertage, Projekt-Deadlines oder andere wichtige Zeitpunkte.

Jedes Highlight kannst du individuell gestalten, z. B. mit eigener Hintergrundfarbe und Linienfabre der Zeilen.

dateSettings: {
			highlights: [{
					title: "Feiertag",
					date: date(2024, 1, 1),
					backgroundColor: "", // bestimmmt die Hintergrundfarbe für den Tag. 
					color: "#fff" // bestimmt die Linienfarbe an den gehighlighteten Tagen
				}]
		},

timeSettings Block

Der timeSettings Block ist ein besonders geeignetes Feature, wenn du nicht 24 Stunden eines Tages darstellen möchtest, sondern nur eine bestimmte Stundenanzahl je Tag. Das kann sinnvoll sein, wenn du zum Beispiel Mitarbeitereinsätze einplanen möchtest und dir dabei nur die wirklichen Arbeitsstunden des Tages anzeigen lässt. Zum Beispiel 08:00 Uhr bis 18:00 Uhr.

timeSettings: {
			amount: 1, 
			startTime: 6,
			duration: 12
		},

amount in timeSettings

Mit dem Parameter amount legst du fest, in welche Zeiteinheiten ein Tag im Gantt-Diagramm unterteilt wird. Standardmäßig ist eine Stunde (also 1) eingestellt – das bedeutet, jede Spalte im Gantt steht für eine Stunde.

Wenn du feinere Einteilungen möchtest, kannst du zum Beispiel 0.5 angeben, um halbstündliche Intervalle anzuzeigen. Auch kleinere Werte wie 0.25 (15 Minuten) sind möglich – je nachdem, wie detailliert du deine Zeitplanung darstellen möchtest.

💡Hinweis: Achte darauf, dass du Dezimalzahlen mit einem Punkt, und nicht einem Komma trennst.

amount: "", // default: 1
amount: 0.5, // Schreibe hier einen Zahlenwert rein   

startTime in timeSettings

Mit dem Parameter startTime bestimmst du, ab welcher Uhrzeit der Tag im Gantt-Diagramm beginnen soll.

Standardmäßig würde der gesamte 24-Stunden-Tag angezeigt. Wenn du jedoch nur einen bestimmten Zeitraum darstellen möchtest – zum Beispiel einen typischen Arbeitstag ab 8 Uhr – dann gibst du einfach 8 an. Das Gantt-Diagramm startet dann bei Stunde 8 (also 08:00 Uhr) und zeigt keine früheren Zeiten an.

startTime: "", // default: 00:00 Uhr
startTime: 6, // Uhrzeit angeben. 

duration in timeSettings

Mit dem Parameter duration legst du fest, wie viele Stunden im Gantt-Diagramm ab der startTime angezeigt werden.

Das ist besonders hilfreich, wenn du nur einen bestimmten Zeitraum – z. B. einen klassischen Arbeitstag – abbilden möchtest. Wenn du zum Beispiel startTime: 8 und duration: 10 angibst, wird der Zeitraum von 08:00 Uhr bis 18:00 Uhr dargestellt.

duration: "", // default: 8
duration: 10, // Zahlenwert angeben   

createModeSettings Block

Mit dem createMode-Block legst du fest, ob User direkt im Gantt-Diagramm per Hover einen neuen Eintrag erstellen dürfen.

Innerhalb dieses Blocks definierst du auch den Parameter amount, der bestimmt, wie viele Stunden ein neu erstellter Eintrag standardmäßig umfassen soll.

Beispiel: Wenn amount: 2 gesetzt ist, wird bei einem Klick auf das Gantt automatisch ein Termin mit einer Dauer von 2 Stunden erstellt.

createModeSettings: {
			show: true, // default: false 
            amount: 2 // default: 
		},

barSettings Block

Die barSettings können auf jeder Ebene deiner hierarchischen Gantt-Items individuell festgelegt werden.

Wenn eine untergeordnete Ebene (z. B. ein Task) keine eigenen Einstellungen hat, übernimmt sie automatisch die barSettings der übergeordneten Ebene. So musst du nicht jede Einstellung mehrfach definieren und behältst trotzdem maximale Flexibilität.

barSettings: {
			height: "40px",
			borderRadius: "10px",
            borderColor: "",
            backgroundColor: ""
		},

sidebarSettings Block

Die sidebarSettings bestimmen das Aussehen und Verhalten der linken Seitenleiste im Gantt-Diagramm.

• Über den Parameter title legst du die Überschrift des Gantt-Diagramms fest.

• Mit customText kannst du diesen Titel zusätzlich stylen – z. B. Schriftgröße, Farbe oder Formatierung.

• position bestimmt die Position des Sichtfensters, das beim Springen zu einem spezifischen Datum angezeigt wird. Das Datum kann also linksbündig oder mittig im Sichtfenster angezeigt werden.

Außerdem kannst du clickActions definieren:
Damit bestimmst du, was passieren soll, wenn ein Nutzer auf einen Eintrag in der Sidebar klickt.
Ein typisches Beispiel: Per Quicklink springt der Gantt-View automatisch zu einem bestimmten Datum, das du vordefiniert hast.

sidebarSettings: {
			width: "400px",
			title: "Einsatzplanung",
			clickActions: [{
					title: "Heute",
					date: today(), 
                    position: ""
				}, {
					title: "Q1",
					date: date(2024, 1, 1), 
                    position: ""
				}]
		},

years

Mit dem Parameter years legst du fest, welche Jahreszahlen im Gantt-Diagramm angezeigt werden sollen. Du kannst entweder ein einzelnes Jahr oder eine ganze Spanne definieren – zum Beispiel:

years: [2025,2026,2027],

Es ist auch möglich, die Anzeige dynamisch zu steuern – etwa über ein Ninox-Feld. So kann der User per Auswahlfeld selbst bestimmen, welche Jahre im Gantt dargestellt werden sollen.

items Abschnitt

Der Abschnitt items definiert die konkreten Inhalte deines Gantt-Diagramms.

Dabei legst du fest:

• Was in der linken Sidebar (also den Zeilenüberschriften) angezeigt wird

• Und was im Content-Bereich des Gantts (also dem Zeitraster) für jede Zeile dargestellt wird

Typischerweise arbeitest du hier mit einer for-Schleife, um dynamisch auf Werte bzw. Datensätze aus einer Ninox-Tabelle zuzugreifen. So kannst du dein Gantt automatisch mit den relevanten Daten füllen – etwa so:

(select Projekte where Aktiv=true).[{
                          ...
                            }]

items in der Sidebar

Im oberen Bereich des items-Blocks definierst du, wie die einzelnen Zeilen (Rows) in der linken Sidebar des Gantt-Diagramms aussehen sollen.

Du kannst hier z. B. Titel, Farben, Höhe, Bar-Styling und Klickverhalten festlegen.

• recordId: Verknüpft das Sidebar-Item mit einem konkreten Datensatz. Wird unter anderem für die clickAction benötigt.

• title: Der Text, der in der linken Spalte angezeigt wird – z. B. der Projektname. Hier kannst du auch ganz eigene Designs mithilfe anderer Widgets, wie Custom Layout, custom text oder Selects gestalten.

• clickAction: Ermöglicht, dass ein Klick auf das Sidebar-Item zum zugehörigen Record führt.

• barSettings: Hier kannst du das Aussehen des zugehörigen Zeitbalkens im Grid-Bereich steuern – unabhängig vom Stil der Sidebar.

items: (select Projekte where Aktiv=true).[{
				recordId: Nr,
				title: Name,
				backgroundColor: "",
				height: "100px",
				barSettings: {
					height: "20px",
					borderRadius: "50px", 
                    borderColor: "",
                    backgroundColor: "" --> einzelnen zeilen in Bis hier alles einstellungen für die linke sidebar 
                },
				clickAction:true,
                  ...}]

timeEntries – Zeiteinträge im Content-Bereich

Im timeEntries-Block definierst du, wie die einzelnen Zeiteinträge im Zeitraster (Content-Bereich) des Gantt-Diagramms dargestellt werden.

Ein timeEntry ist dabei ein Balken auf der Zeitachse – also ein Zeitraum mit Start- und Enddatum, der z. B. ein Projekt oder eine Aufgabe visualisiert.

Wichtige Eigenschaften:

• Mehrere Zeiteinträge pro Zeile möglich
  Du kannst beliebig viele timeEntries pro Item definieren – z. B. wenn ein Projekt mehrere Zeitabschnitte hat.

• title
  Der Text, der im Balken angezeigt wird – kann auch durch Widgets ersetzt oder dynamisch gefüllt werden.

• recordId
  Verlinkt den Eintrag mit einem Datensatz. In Verbindung mit clickAction wird so ein Klick auf den Balken zur Detailansicht weitergeleitet.

• startDate / endDate
  Bestimmen die Position und Breite des Balkens auf der Zeitachse.

• barSettings
  Für jedes timeEntry kannst du eigene Styles definieren – z. B. eine andere Farbe für unerledigte Aufgaben (backgroundColor: "#ef1d2e").

items:  (select Projekte where Aktiv=true).[{				
                ...
				timeEntries: [{
						title: Name,
						recordId: Nr,
						startDate: min(Aufgaben.Startdatum),
						endDate: max(Aufgaben.Enddatum),
						clickAction: true, 
                        barSettings: {
        					height: "20px", 
        					borderRadius: "50px", 
                            borderColor: "",
                            backgroundColor: ""
                        },
					}],
				items: Aufgaben.[{
                      ...
                }]

Bei Fragen zur Konfiguration oder bei individuellen Anwendungsfällen hilft dir das Entwicklerteam gerne weiter.
Schau auch in die Beispiele oder hole dir Inspiration in der Discord Community.

Happy Widgeting 🥳