项目管理软件dhtmlxGantt配置教程（十三）：如何自定义时间跨度

最新推荐文章于 2024-06-25 10:45:14 发布

原创

最新推荐文章于 2024-06-25 10:45:14 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

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

本文介绍了如何在项目管理工具dhtmlxGantt中自定义时间刻度以隐藏非工作时间。通过配置，甘特图能够根据工作时间（08:00-12:00和13:00-17:00）调整比例。当启用skip_off_time模式时，它会减少最早任务的小时数，以便在时间轴上显示工作时间。禁用此模式则会导致非工作时间的单元格也显示在时间尺度上。dhtmlxGantt是一款全面的甘特图组件，适用于各种项目管理需求。

在本部分中，您将找到有关如何自定义和配置时间刻度以显示或隐藏非工作时间跨度的示例。此外，即使启用了skip_off_time模式，您也会找到一个示例，说明如何从比例开始隐藏具有非工作时间的单元格。

下面我们为您提供一个自定义比例示例，该示例适用于工作时间为 08:00 至 12:00 和 13:00 至 17:00 的最常见情况。

gantt.date.day_custom_start = function (date) {
    return date;
};
 
gantt.date.add_day_custom = function (date, inc) { 
    const nextDate = new Date(date); 
    if (nextDate.getHours() < 8) {  // Statement 1
        const diff = 8 - nextDate.getHours(); 
        return gantt.date.add(nextDate, diff * inc, "hour"); 
    } 
    if (nextDate.getHours() == 8) {  // Statement 2
        return gantt.date.add(nextDate, 9 * inc, "hour"); 
    } 
    if (nextDate.getHours() == 17) {  // Statement 3
        return gantt.date.add(nextDate, 15 * inc, "hour"); 
    } 
 
    return gantt.date.add(date, 8 * inc, "hour"); 
};
 
gantt.config.scales = [
    { unit: "day_custom"