Hervorheben von Zeitfenstern

Manchmal ist es hilfreich, bestimmte Zeitfenster hervorzuheben, um sie hervorzuheben.

  • Um eine Zelle im Zeitachsenbereich hervorzuheben, können Sie die Vorlage timeline_cell_class verwenden.
  • Um eine Zelle in der Zeitskala der Zeitleiste hervorzuheben, steht die Vorlage scale_cell_class zur Verfügung.

Diese Vorlagen sind Funktionen, die alle Daten verarbeiten und einer bestimmten CSS-Klasse die entsprechenden Zellen zuweisen.

Beispielsweise können Wochenenden hervorgehoben werden, um die wöchentliche Struktur der Skala deutlicher zu machen:

<style>
.weekend{ background: #f4f7f4 !important;}
</style>
gantt.templates.scale_cell_class = function(date){
    if(date.getDay()==0||date.getDay()==6){
        return "weekend";
    }
};
gantt.templates.timeline_cell_class = function(task,date){
    if(date.getDay()==0||date.getDay()==6){ 
        return "weekend" ;
    }
};
gantt.init("gantt_here");

Beim Arbeiten mit Arbeitszeitberechnungen können Sie fest codierte Werte durch isWorkTime ersetzen:

gantt.config.work_time = true;
 
gantt.templates.scale_cell_class = function(date){
    if(!gantt.isWorkTime(date)){
        return "weekend";
    }
};
gantt.templates.timeline_cell_class = function(task,date){
    if(!gantt.isWorkTime({task:task, date:date})){
        return "weekend" ;
    }
};
gantt.init("gantt_here");

Related sample:  Highlighting weekends

Das Hinzufügen des 'important'-Schlüsselworts stellt sicher, dass die angegebene CSS-Eigenschaft auf die Zelle angewendet wird, ohne überschrieben zu werden.

Zurück nach oben