CSS-Dokumentation

Diese Anleitung erklärt, wie die Standardfarbeneinstellungen für verschiedene Elemente des Gantt-Diagramms angepasst werden können. Der Fokus liegt auf den Hauptklassen-Selektoren und Vorlagen, die für das Styling dieser Bereiche verwendet werden: Rasterbereich, Zeitachsenbereich und Ressourcenpanel.

Styling des Rasters

Hier finden Sie CSS-Selektoren, um wichtige Elemente des Rasterbereichs zu stylen.

Nachfolgend die Struktur des DOM-Elements für das Raster:

- .gantt_grid
    - .gantt_grid_scale
        - .gantt_grid_head_cell
    - .gantt_grid_data
        - .gantt_row.odd 
        - .gantt_row 
        - .gantt_row.gantt_row_task
        - .gantt_row.gantt_row_project
        - .gantt_row.gantt_row_milestone
            - gantt_cell.gantt_cell_tree
                - .gantt_tree_indent
                - .gantt_tree_icon.gantt_close
                - .gantt_tree_icon.gantt_open
                - .gantt_tree_content
            - gantt_cell
                - .gantt_tree_content

Rasterkopf

Um den Stil des Rasterkopfes anzupassen, verwenden Sie den .gantt_grid_scale Klassen-Selektor.

Hier ist ein Beispiel, wie Sie einen gemeinsamen Hintergrund und Schriftfarbe für die Raster- und Zeitachsen-Köpfe festlegen:

.gantt_grid_scale, .gantt_task_scale, .gantt_task_vscroll {
    background-color: #eee;
}
.gantt_grid_scale, .gantt_task_scale, 
.gantt_task .gantt_task_scale .gantt_scale_cell,
.gantt_grid_scale .gantt_grid_head_cell {
    color: #000;
    font-size: 12px;
    border-bottom: 1px solid #cecece;
}

Skalenhöhe

Vermeiden Sie es, die Höhe des Rasterkopfes und der Zeitskala mit CSS anzupassen.

Stattdessen verwenden Sie die scale_height Konfigurationseigenschaft:

gantt.config.scale_height = 50;

Eine Zelle des Rasterkopfes

Um eine bestimmte Zelle im Rasterkopf zu stylen, verwenden Sie den .gantt_grid_head_cell Selektor.

Hier sind die Selektoren, die Sie verwenden können:

.gantt_grid_head_cell[data-column-id='columnName'] - zielt auf eine bestimmte Spalte nach ihrem Namen ab.

Der columnName entspricht der name-Eigenschaft der Spalte:

<style>
    .gantt_grid_head_cell[data-column-id='columnName'] {
        background-color: #ededed;
        color:black;
    }
</style>

gantt.config.columns = [
    ...
    {name: "columnName", align: "center"},
    ...
];

.gantt_grid_head_cell[data-column-index='1'] - wählt eine Spalte nach ihrem Index aus.
.gantt_grid_head_cell[data-column-name='start_date'] - wählt eine Spalte nach Name aus.

Rasterkörper

Um eine benutzerdefinierte Farbe auf den Rasterkörper anzuwenden, verwenden Sie den .gantt_grid_data Selektor.

Styling von Rasterreihen

Der .gantt_row Selektor wird verwendet, um Rasterreihen zu stylen.

Jede zweite Reihe

Um die Farbe der Reihen abzuwechseln, wenden Sie Stile auf den .gantt_row.odd Selektor an:

.gantt_row.odd{
    background-color:#f4f4fb;
}

Obwohl die geraden Reihen hervorgehoben erscheinen, wird der Stil tatsächlich auf Reihen mit ungeraden Indizes (1, 3, 5, etc.) angewendet, basierend auf ihren Indizes.

Ausgewählte Reihe

Um eine ausgewählte Reihe zu stylen, verwenden Sie den .gantt_row.gantt_selected Selektor:

.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
    background-color: #fff3a1;
}

Related sample: Styling selected row

Aufgabenreihen, Projektreihen und Meilensteine

Um Reihen für Aufgaben, Projekte oder Meilensteine zu stylen, verwenden Sie diese Selektoren:

.gantt_row.gantt_row_task
.gantt_row.gantt_row_project
.gantt_row.gantt_row_milestone

Zum Beispiel:

.gantt_row.gantt_row_project{
   background-color:#fafafa;
   font-weight: bold;
}

Bestimmte Reihen

Für spezifische Reihen können Sie benutzerdefinierte Klassen mit der grid_row_class Vorlage hinzufügen:

<style>
    .highlighted_task.gantt_row { 
        background-color: #ff9668;
        border-color: rgba(0,0,0,0.3);
    }   
</style>

gantt.templates.grid_row_class = function(start, end, task){
    if(task.highlight){
        return "highlighted_task";     }
    return "";
};

Reihenhöhe

Um die Reihenhöhe zu ändern, verwenden Sie die row_height Konfiguration:

gantt.config.row_height = 40;

Alternativ können Sie die Höhe über die row_height Eigenschaft einer Aufgabe festlegen:

{ id: 2, text: "Task #1", start_date: "02-04-2018", 
    duration: 8, row_height:40, parent: 1 },

Vermeiden Sie es, CSS für Anpassungen der Reihenhöhe zu verwenden, da dies das Layout stören könnte.

Styling von Zellen/Spalten des Rasters

Um Rasterzellen oder -spalten zu stylen, verwenden Sie den .gantt_row .gantt_cell Selektor.

Sie können eine bestimmte Spalte auf zwei Arten anvisieren:

Nach ihrem Namen mit .gantt_row .gantt_cell[data-column-name='columnName'], zum Beispiel:

.gantt_grid_head_cell[data-column-id='start_date'],
.gantt_row .gantt_cell[data-column-name='start_date'] {
    background-color: #ededed;
    color:black;
}

Beachten Sie, dass .gantt_grid_head_cell und .gantt_cell unterschiedliche Datenattribute verwenden: data-column-id und data-column-name. Diese Inkonsistenz könnte in zukünftigen Updates behoben werden.

Nach ihrem Index mit .gantt_row .gantt_cell[data-column-index='1'].

Styling der Zeitleiste

Dieser Abschnitt beschreibt CSS-Selektoren zur Anpassung der Stile von Elementen im Zeitleistenbereich.

Die DOM-Struktur des Zeitleistenbereichs sieht folgendermaßen aus:

- .gantt_task
    - .gantt_task_scale
        - .gantt_scale_line
            - .gantt_scale_cell
    - .gantt_data_area
        - .gantt_task_bg
            - .gantt_task_row
            - .gantt_task_row.odd
                - .gantt_task_cell
        - .gantt_links_area
            - .gantt_task_link
        - .gantt_bars_area
            - .gantt_task_line 
                - .gantt_task_progress_wrapper 
                    - .gantt_task_progress 
                - .gantt_task_progress_drag 
                - .gantt_task_content 
                - .gantt_task_drag.task_start_date 
                - .gantt_task_drag.task_end_date
                - .gantt_link_control.task_start_date
                - .gantt_link_control.task_end_date
                    - .gantt_link_point
        - div - benutzerdefinierte Ebenen

Zeitskala

Die Struktur des Zeitskala-DOM-Elements ist wie folgt:

- .gantt_task_scale
    - .gantt_scale_line
        - .gantt_scale_cell

Container der Zeitskala

Verwenden Sie den .gantt_task_scale Selektor, um benutzerdefinierte Stile auf den Container der Zeitskala anzuwenden.

Zum Beispiel können Sie die Schriftfarbe und die Ränder der Zeitskala wie folgt ändern:

.gantt_grid_scale, .gantt_task_scale {
    border-bottom: 1px solid #0e0e0e;
}
 
.gantt_task .gantt_task_scale .gantt_scale_cell {
    color: #000;
}
.gantt_grid_scale .gantt_grid_head_cell {
    color: #000;
}

Aufgabenbalken

Um das Erscheinungsbild des Aufgabenbalkens anzupassen, können Sie einen benutzerdefinierten Stil mit dem .gantt_task_line Selektor erstellen.

Hier ist ein Beispiel, wie Sie den Randstil des Aufgabenbalkens ändern können:

.gantt_task_line {
    border-radius: 14px;
}

Wenn Sie die Farbe der Aufgabenbalken ändern möchten, folgen Sie diesen zwei Schritten:

Passen Sie die Stile für Ränder und Fortschrittsbalken an, sodass ihre Farben mit einer benutzerdefinierten Farbe übereinstimmen, die Sie auf den Aufgabenbalken anwenden:

.gantt_task_line{
    border-color: rgba(0, 0, 0, 0.25); /* Schwarze Farbe mit 25% Deckkraft */
}
.gantt_task_line .gantt_task_progress {
    background-color: rgba(0, 0, 0, 0.25);
}

Legen Sie die gewünschte Farbe für den Aufgabenbalken und seinen Inhalt fest:

.gantt_task_line{
    background-color: #03A9F4;
}
.gantt_task_line.gantt_task_content {
    color: #fff;
}

Für ein Beispiel, wie man konsistente Rand- und Fortschrittsbalkenfarben auf Aufgabenbalken mit unterschiedlichen Farben anwendet, schauen Sie sich den Artikel Task Coloring an.

Um Reihen für Aufgaben, Projekte oder Meilensteine zu stylen, können Sie benutzerdefiniertes CSS zu den jeweiligen Klassen-Selektoren hinzufügen:

.gantt_task_line.gantt_bar_task
.gantt_task_line.gantt_bar_project
.gantt_task_line.gantt_bar_milestone

Hier ist ein Beispiel, wie man einen ausgewählten Balken stylt:

.gantt_task_line.gantt_selected {
    box-shadow: 0 2px 5px #000;
}
 
.gantt_task_line.gantt_bar_project.gantt_selected {
    box-shadow: 0 2px 5px #000;
}

Related sample: Styling selected bar

Für benutzerdefinierte Aufgabentypen wird der entsprechende Klassenname sein:

{ 
    id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, 
    type:"custom_type", parent: 1 },

-> .gantt_task_line.gantt_bar_custom_type.

Gesplittete Aufgaben

Gesplittete Aufgaben werden als Unteraufgaben eines übergeordneten Elements behandelt. Der hellgrüne Balken im Hintergrund repräsentiert das übergeordnete Element und wird mit zusätzlichem CSS gestylt.

Im Beispiel wird beim Erweitern von 'Task #2' der grüne Balken für das 'Task #2' Zusammenfassungselement sichtbar.

Wenn gesplittete Aufgaben in einer einzigen Reihe angezeigt werden, bleibt der grüne Balken an derselben Position, hat jedoch geänderte Deckkraft- und Z-Index-Werte. Sie können ihn wie andere Balken in der Zeitleiste anpassen oder komplett mit diesem CSS ausblenden:

.gantt_task_line.gantt_split_parent {
    display: none;
}

Wenn nur eine gesplittete Aufgabe vorhanden ist, wird das Zusammenfassungselement (type="project") verborgen, da es vollständig von der gesplitteten Aufgabe abgedeckt wird. Ohne gesplittete Unteraufgaben verwendet das Zusammenfassungselement die Standarddaten und -dauer.

Fortschrittsbalken

Um den Fortschrittsbalken zu stylen, können Sie diese Selektoren verwenden:

.gantt_task_progress - für die Füllfarbe des Fortschrittsbalkens;
.gantt_task_progress_drag - für den Ziehgriff des Fortschrittsbalkens.

Hier ist, wie Sie das Erscheinungsbild der Aufgaben- und Fortschrittsbalken aktualisieren können:

Beispiel für Hintergrund-, Text- und Fortschrittsfarben:

/* Aufgabe */
 
/* Hintergrundfarbe der Aufgabenbalken */
.gantt_task_line {
    background-color: #3db9d3;
    border: 1px solid #2898b0;
}
 
/* Textfarbe */
.gantt_task_line .gantt_task_content {
    color: #fff;
}
 
/* Fortschrittsfüllung */
.gantt_task_progress {
    background: #299cb4;
}

Beispiel für Projekt (Zusammenfassungs-) Balken:

/* Projekt */
/* Hintergrundfarbe der Projektbalken */
.gantt_task_line.gantt_bar_project {
    background-color: #65c16f;
    border: 1px solid #3c9445;
}
 
/* Fortschritt der Projektbalken */
.gantt_task_line.gantt_bar_project .gantt_task_progress {
    background-color: #46ad51;
}

Beispiel für Meilenstein-Balken:

/* Meilenstein */
.gantt_task_line.gantt_milestone {
    background-color: #d33daf;
    border: 0 solid #61164f;
}

Benutzerdefinierte Farbe für bestimmte Aufgabenbalken

Um eine spezifische Farbe auf ausgewählte Aufgabenbalken anzuwenden, weisen Sie eine benutzerdefinierte Klasse mit der gantt.templates.task_class Vorlage zu:

gantt.templates.task_class = function(start, end, task){
    if(task.highlight){
        return "highlighted_task";
    }
    return "";
};

Verwenden Sie dann diese benutzerdefinierte Klasse in Ihrem CSS:

.highlighted_task.gantt_task_line {
    background-color: #ff9668;
    border-color: rgba(0,0,0,0.3);
}
.highlighted_task .gantt_task_progress {
    text-align: center;
    z-index: 0;
    background: rgba(0,0,0,0.3);
}

Hervorhebung von Bereichen innerhalb des Aufgabenbalkens

Um bestimmte Bereiche innerhalb eines Aufgabenbalkens hervorzuheben, fügen Sie zusätzliche Elemente mit der gantt.templates.task_text Vorlage hinzu:

gantt.templates.task_text = function(start, end, task){
    return '<div class="custom_progress warm_up" style="width:20%"></div>' +
      '<div class="custom_progress in_progress" style="width:60%">'+task.text+'</div>'
      '<div class="custom_progress cool_down" style="width:20%"></div>';
};

Und wenden Sie das folgende CSS an:

.custom_progress {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    height: 100%;
}
 
.custom_progress.nearly_done {
    background-color: #4CC259;
}
 
.custom_progress.in_progress {
    background-color: #88BFF5;
}
 
.custom_progress.idle {
    background-color: #d96c49;
}

Verknüpfung

Die DOM-Struktur für ein Verknüpfungselement sieht so aus:

- .gantt_task_link
    - .gantt_line_wrapper
    - .gantt_link_line_right
    - .gantt_link_line_left
    - .gantt_link_line_up
    - .gantt_link_line_down
- .gantt_link_arrow.gantt_link_arrow_right
- .gantt_link_arrow.gantt_link_arrow_left

Hier ist, wie Sie die Elemente von Abhängigkeitsverknüpfungen stylen können:

.gantt_line_wrapper div {
    background-color: #ffa011;
}
.gantt_link_arrow_right {
    border-left-color: #ffa011;
}
.gantt_link_arrow_left {
    border-right-color: #ffa011;
}
.gantt_task_link:hover .gantt_line_wrapper div {
    box-shadow: 0 0 5px 0 #ffa011;
}

Related sample: Styling links

Um die Dicke der Verknüpfungslinie anzupassen, verwenden Sie die gantt.config.link_line_width Konfiguration.

Resizer

Um das DOM-Element des Resizers zu stylen, verwenden Sie diese Selektoren:

.gantt_task_drag
.gantt_task_drag.task_start_date
.gantt_task_drag.task_end_date

Beispiel zum Deaktivieren des Startdatum-Resizers:

.gantt_task_line:hover .gantt_task_drag.task_start_date{
    display: none;
}

Beispiel zum Deaktivieren des Enddatum-Resizers:

.gantt_task_line:hover .gantt_task_drag.task_end_date{
    display: none;
}

Verknüpfungssteuerung

Um den runden Griff am Anfang oder Ende einer Aufgabe zu stylen, verwenden Sie diese Selektoren:

.gantt_link_control .gantt_link_point
.gantt_link_control.task_start_date .gantt_link_point
.gantt_link_control.task_end_date .gantt_link_point

Hintergrundraster

Die DOM-Struktur für das Hintergrundraster sieht so aus:

- .gantt_data_area
    - .gantt_task_bg
        - .gantt_task_row
        - .gantt_task_row.odd
            - .gantt_task_cell

Hintergrundreihen:

Um den Standardstil der Hintergrundreihen zu ändern, fügen Sie benutzerdefinierte Stile zum .gantt_task_row Selektor hinzu. Zum Beispiel:

.gantt_row,
.gantt_task_row {
    border-bottom: 1px solid #ebebeb;
    background-color: #fff;
}

Um die Hintergrundfarbe für Reihen abzuwechseln, definieren Sie benutzerdefinierte Eigenschaften im .gantt_task_row.odd Selektor.

Sie können auch benutzerdefinierte Farben für die ausgewählte Reihe wie folgt festlegen:

.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
    background-color: #fff3a1;
}
.gantt_task_row.gantt_selected .gantt_task_cell{
    border-right-color: #ffec6e;
}

Related sample: Styling selected row

Hintergrundzellen

Um die Standardstileinstellungen für Hintergrundzellen anzupassen, können Sie einen benutzerdefinierten Stil im .gantt_task_cell Selektor definieren.

Wenn Sie die Hintergrundspalten einfärben möchten, können Sie die timeline_cell_class Vorlage wie hier gezeigt verwenden:

gantt.templates.timeline_cell_class = function (task, date) {
    if(!gantt.isWorkTime({date: date, unit: "day", task: task})){
        return "weekend";
    }
    return "";
};

Wenden Sie dann das folgende CSS an, um es zu stylen:

.gantt_task_cell.weekend {
    background-color: #F5F5F5;
}
 
.gantt_task_row.gantt_selected .gantt_task_cell.weekend {
    background-color: #F8EC9C;
}

Ressourcenpanel

Das Ressourcenpanel umfasst Raster und Zeitleisten, die dem Haupt-Gantt-Bereich ähneln.

Standardmäßig erben die Raster und Zeitleisten der Ressourcenansicht globale Vorlagen und Konfigurationen. Sie können jedoch einzigartige Konfigurationen und Vorlagen für das Ressourcenpanel einrichten, indem Sie sie in der Layout-Konfiguration bereitstellen.

Um das Ressourcenraster und die Zeitleiste in CSS anzusprechen, verwenden Sie ihre jeweiligen Ansichts-Namen im Selektor:

.resourceGrid_cell .gantt_row,
.resourceHistogram_cell .gantt_task_row {
    border-bottom: 1px solid #ebebeb;
    background-color: #fff;
}

Hier ist die grundlegende Struktur der DOM-Elemente für das Ressourcenpanel:

- .gantt_layout_root
    - .grid_cell 
    - .timeline_cell 
    - .resourceGrid_cell 
    - .resourceHistogram_cell 
    - .resourceTimeline_cell

Die Klassennamen unter .gantt_layout_root stammen aus der Layout-Konfiguration und entsprechen der view-Eigenschaft einer Layoutzelle:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", group:"grids", scrollY: "scrollVer"},                 ...
            ]
        },
        ...
        {
            id: "resources",
            cols: [
                { view: "resourceGrid", group:"grids", scrollY: "resourceVScroll" },                 ...
                { view: "resourceHistogram", capacity:24, scrollX: "scrollHor",                      scrollY: "resourceVScroll" }, 
                ...
            ]
        },
        ...
    ]
};

Ressourcenraster

Sie können dieselben Selektoren verwenden wie für das Aufgabenraster. Der oberste Selektor für das Ressourcenraster ist .resourceGrid_cell:

.resourceGrid_cell .gantt_row,
.resourceGrid_cell .gantt_row.odd {
    background-color: rgba(232, 232, 232, 0.6);
}

Ressourcenhistogramm

Das Ressourcenhistogramm teilt seine Elemente mit der Hauptzeitleiste. Standardmäßig gelten Selektoren, die auf die Hauptzeitleiste abzielen, auch für die Ressourcentimeline, es sei denn, Sie verwenden spezielle Layout-Zellklassen wie .timeline_cell oder .resourceHistogram_cell.

Um das Ressourcenhistogramm zu stylen, verwenden Sie den .resourceHistogram_cell Selektor.

Hier ist die DOM-Struktur für das Ressourcenhistogramm:

- .gantt_task_bg
- .gantt_bars_area
    - div
        - .gantt_histogram_fill 
        - .gantt_histogram_cell 
    - div
        - .gantt_histogram_hor_bar
        - .gantt_histogram_vert_bar

Hier ist ein Beispiel, wie Sie die Farben der Histogrammelemente ändern können:

.gantt_histogram_cell {
    color: #000;
}
 
.gantt_histogram_label {
    font-weight: 700;
    font-size: 13px;
}
 
.gantt_histogram_fill {
    background-color: rgba(41,157,180,.2);
}

Um spezifische Zellen anzupassen, verwenden Sie die gantt.templates.histogram_cell_class Vorlage:

gantt.templates.histogram_cell_class = function(start_date,end_date,resource,tasks) {
    if (getAllocatedValue(tasks, resource) > getCapacity(start_date, resource)) {
        return "column_overload"
    }
};

Wenden Sie das folgende CSS an:

.column_overload .gantt_histogram_fill {
    background-color: #ffa9a9;
}

Um die Histogrammlinien zu stylen, wenden Sie benutzerdefiniertes CSS auf diese Selektoren an:

.gantt_histogram_hor_bar
.gantt_histogram_vert_bar

Zum Beispiel:

.gantt_histogram_hor_bar, .gantt_histogram_vert_bar {
    background: #299db4;
}

Ressourcendiagramm

Das Ressourcendiagramm teilt auch Elemente mit der Hauptzeitleiste. Standardmäßig gelten Selektoren, die auf die Hauptzeitleiste abzielen, auch für die Ressourcentimeline, es sei denn, Sie verwenden spezielle Layout-Zellklassen wie .timeline_cell oder .resourceTimeline_cell.

Um das Ressourcendiagramm zu stylen, verwenden Sie den .resourceTimeline_cell Selektor.

Hier ist die DOM-Struktur für das Ressourcendiagramm:

- .gantt_task_bg
- .gantt_bars_area
    - div
        - .gantt_resource_marker
            - div

Der oberste Selektor für das Ressourcendiagramm ist .resourceTimeline_cell.

Hier ist ein Beispiel, wie Sie die Labels im Ressourcendiagramm stylen können:

.gantt_resource_marker div {
    background: #51c185;
    width: 28px;
    height: 28px;
    line-height: 29px;
    display: inline-block;
    color: #FFF;
    margin: 3px;
}

Um spezifische Marker anzupassen, verwenden Sie die gantt.templates.resource_cell_class Vorlage:

<style>
    .resource_marker.workday_over div {
        border-radius: 3px;
        background: #ff8686;
    }

gantt.templates.resource_cell_class = function(start_date, end_date, resource, tasks){
    var css = [];
    css.push("resource_marker");
    if (tasks.length <= 1) {
        css.push("workday_ok");
    } else {
        css.push("workday_over");
    }
    return css.join(" ");
};

Zurück nach oben