Zum Hauptinhalt springen

scale_cell_class

Description​

Definiert die CSS-Klasse, die den Zellen im Zeitachsenbereich der Zeitskala zugewiesen wird

scale_cell_class: (date: Date) => string | void;

Parameters​

  • date - (required) Date - Das spezifische Datum, das von einer Zelle dargestellt wird

Returns​

  • text - (string | void) - Eine CSS-Klasse, die auf das entsprechende Element angewendet wird

Example​

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

Details​

Beim Einsatz von work time calculations ist es möglich, statt fester Werte auf isWorkTime zurückzugreifen:

gantt.config.work_time = true;

gantt.templates.scale_cell_class = function(date){
       if(!gantt.isWorkTime(date))
          return true;
};

Wenn mehrere Skalen über die Eigenschaft gantt.config.scales definiert sind, wirkt sich dieses Template nur auf die erste Skala aus. Um CSS-Klassen Zellen in anderen Skalen zuzuweisen, verwenden Sie das css-Attribut innerhalb der gantt.config.scales-Konfiguration:

gantt.config.scales = [
    { unit: "month", step: 1, date: "%F" },
    { unit: "week", step: 1, date: "%W" },
    {
        unit: "day", step: 1, date: "%d", css: function (date) { /*!*/
            if (!gantt.isWorkTime({ date: date })) { /*!*/
                return "weekend"; /*!*/
            } /*!*/
        } /*!*/
    },
];