--- title: "Custom Gantt" slug: "gantt" category: "Widgets" hosts: "ninox" --- # Custom Gantt ## AI Defaults (read first) - **Function name**: `arcGantt` (NOT `arcCustomGantt`). - **uniqueId**: Required, `"gantt-" + Nr`. - **ganttSettings**: `height`, `embedded`, `showScrollbar` live here (NOT at root level). - **height**: `ganttSettings: { height: "100%" }` when embedded in dashboard. - **years**: Array of integers, e.g. `[2025, 2026]`. - **items**: Each item needs `recordId: Nr` and `timeEntries` array. - **timeEntries**: Each needs `recordId: Nr`, `startDate`, `endDate` (date field values). - **Hierarchy**: Nest `items` arrays inside parent items for tree structure. - **sidebarSettings**: `width: "400px"` for the left sidebar. # Custom Gantt ![](https://framerusercontent.com/images/dcMx5Gbm9HXvf5ETGtWzoMCLes.png) 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 ```javascript 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. ### `**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. #### `**height**` im `**ganttSettings**` Block `height` bestimmt die Höhe des Gantt-Diagramms in Pixeln. Beispiel: `"800px"` #### `**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. #### `**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. #### `**currentZoomLevel**` im `**ganttSettings**` Block ![](https://framerusercontent.com/images/Mif9IVD9lV8C9GqZzriUa1cHjPA.png) 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. #### `**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. 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: 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. ### `**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. ### `**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. ### `**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. ### `**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. ### `**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. ### `**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. ### `**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. ### `**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: 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: ### `**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. ### `**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"`). 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 🥳