Theme: ← Übersicht Builder Katalog-Verwaltung Tokens

Gantt (Zeitplan)

Projekt-Zeitplan als Balkendiagramm: Zeilen mit Aufgaben, Zeitachse in Tagen/Wochen, farbige Balken (Ton aus Tokens), Fortschritts-Füllung, Heute-Linie und Meilenstein-Rauten

Im Builder nutzen
Components v1.0.0 Daten AppDesktop component.gantt

Beispiele

Projektplan über 4 Wochen mit Fortschritt, Meilenstein und Heute-Linie
KW 32KW 33KW 34KW 35
KonzeptDesign
Bausteine bauenEntwicklung
DatenanbindungEntwicklung
Abnahme
Livegang

Eigenschaften

PropTypDefaultBuilder-Label
start *string—Beginn (TT.MM.JJJJ)
daysnumber28Sichtbare Tage
todaystring""Heute-Linie (TT.MM.JJJJ, leer = aus)
scalestring: day | week"week"Achsen-Beschriftung
rows *array—Zeilen

* Pflicht-Prop

Events & Slots

Events: ⚡ select — im Surface per on: {<event>: {action, params}} verdrahtbar.

Genutzte Design-Tokens

border.hairlinecolor.accentcolor.action.primarycolor.border.defaultcolor.status.dangercolor.status.successcolor.status.warningcolor.surface.defaultcolor.text.defaultcolor.text.mutedfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultleading.tightradius.controlradius.surfacesize.1size.10size.2size.3size.32size.4size.40size.5size.6size.8text.smtext.xs

LLM-Notizen

component.gantt

Projekt-Zeitplan als Balkendiagramm. Alle Positionen werden SERVERSEITIG in Prozent gerechnet — kein Layout-JavaScript, damit auch statisch (E-Mail-Export, Druck) korrekt.

Wann nutzen

  • Projektpläne, Kampagnen-Zeitschienen, Ressourcen-Belegung.
  • Für reine Aufgabenlisten ohne Zeitachse: component.task oder component.sortable-list.

Wichtige Props

  • start* (TT.MM.JJJJ), days (sichtbares Fenster), today (rote Linie), scale: day|week.
  • rows* = [{label, start, end?, tone?: primary|accent|success|warning|danger, progress?: 0-100, milestone?: true, meta?}]
  • Ohne end = ein Tag; milestone: true rendert eine Raute statt eines Balkens.

Beispiel-Node


{
  "definition": "component.gantt",
  "props": {
    "start": "03.08.2026", "days": 28, "today": "12.08.2026",
    "rows": [
      {"label": "Konzept", "start": "03.08.2026", "end": "09.08.2026", "tone": "success", "progress": 100},
      {"label": "Livegang", "start": "30.08.2026", "tone": "danger", "milestone": true}
    ]
  }
}

Hinweise

  • Datumsformat ist strikt TT.MM.JJJJ; ungültige Zeilen werden still übersprungen (nie kaputtes Layout).
  • Emittiert select mit {row, label} beim Balken-Klick.