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 - (erforderlich) Datum - das Datum einer Zelle

Returns​

  • text - (string | void) - eine CSS-Klasse für das betreffende Element

Example​

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

Details​

Beachten Sie, dass Sie bei der Verwendung von Arbeitszeitberechnungen stattdessen isWorkTime verwenden können, anstelle fest codierter Werte:

gantt.config.work_time = true;

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

Wenn Sie mehrere Skalen über die Eigenschaft gantt.config.scales festgelegt haben, wird die Vorlage nur auf die erste Skala angewendet. Um die CSS-Klasse den Zellen jeder anderen Skala zuzuweisen, verwenden Sie das css-Attribut der Eigenschaft gantt.config.scales:

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"; /*!*/
            } /*!*/
        } /*!*/
    },
];
Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support