跳到主要内容

scale_cell_class

Description​

定义将分配给时间线区域时间刻度中单元格的CSS类

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

Parameters​

  • date - (required) Date - 表示单元格对应的具体日期

Returns​

  • text - (string | void) - 要应用于相关项的CSS类

Example​

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

Details​

在使用工作时间计算时，可以依赖 isWorkTime，而不是使用固定值:

gantt.config.work_time = true;

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

如果通过gantt.config.scales属性设置了多个刻度，此模板仅影响第一个刻度。要为其他刻度中的单元格分配CSS类，请在gantt.config.scales配置中使用 css 属性:

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"; /*!*/
            } /*!*/
        } /*!*/
    },
];