项目管理软件dhtmlxGantt配置教程（十五）：突出展示时间段

最新推荐文章于 2024-11-25 15:45:44 发布

原创

最新推荐文章于 2024-11-25 15:45:44 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#项目管理工具 #甘特图 #DHTMLXGantt #项目管理软件

本文介绍了如何在dhtmlxGantt中通过timeline_cell_class和scale_cell_class模板来突出显示时间线上的特定时间段，如周末。利用这些模板和isWorkTime函数，可以更好地在甘特图中区分工作时间和非工作时间。

为了让用户注意特定的时间段，您可以突出显示它们。

要突出显示时间线区域的单元格，请使用timeline_cell_class模板。
要突出显示时间线时间刻度的单元格，请使用scale_cell_class模板。

模板是一个函数，它遍历所有日期并将指定的 CSS 类应用于相关单元格。

例如，您可以突出显示周末以直观地将比例划分为周：

<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");

请注意，在使用工作时间计算时，您可以使用isWorkTime而不是硬编码值：

gantt.config.work_time = true;
 
gantt.templates.scale_cell_class = function(date){
    if(!gantt.isWorkTime(date)){
        return "weekend";
    }
};
gantt.templates.timeline_c