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

这篇文章给大家带来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", step: 1, date: "%d %H:00" },];// gantt.config.skip_off_time = true;gantt.config.work_time = true;gantt.config.correct_work_time = true;gantt.plugins({    auto_scheduling: true,});gantt.setWorkTime({ hours: ["8:00-12:00", "13:00-17:00"] });gantt.config.duration_unit = "minute";gantt.config.duration_step = 1;gantt.config.time_step = 1;gantt.config.round_dnd_dates = false;

假设最早的任务将在 2025 年 4 月 1 日 08:00 开始，并考虑甘特将如何根据gantt.config.skip_off_time的值在此任务之前添加偏移量。

我们将从在时间尺度中隐藏非工作时间的配置开始：

gantt.config.skip_off_time = true;

在这种情况下，为了创建第一个“小时”单元格，甘特图将减少最早任务的小时数，直到时间达到前一天的工作时间。

• 首先，甘特图将从 2025 年 4 月 1 日 08:00 减去 9 小时（语句 2）：08:00 – 9 小时 = 23:00
• 由于 23:00 是不满足任何条件的非工作时间，甘特图将通过减去 8 小时再次减少时间：23:00 – 8 小时 = 15:00
• 由此产生的时间 – 2025 年 3 月 31 日 15:00 – 被视为工作时间。

因此，31 15:00是将显示在第一个单元格上的值。

要了解甘特如何计算所有其他单元格，让我们禁用gantt.config.skip_off_time：

gantt.config.skip_off_time = false;

正如我们在上面发现的，时间刻度的第一个单元格将具有31 15:00的值。但是现在最早的任务之前的空单元格的数量会增加，因为非工作时间的单元格也会显示在秤上。

为了计算这些单元格的值，应用以下逻辑：

• 2025年3月31日15:00为不符合规定条件的工作时间。因此，要计算第二个单元格的值，甘特图将通过添加 8 小时来增加时间：15:00 + 8 小时 = 23:00
• 2025年3月31日23:00是非工作时间，也不符合任何条件。因此，第三个单元格的值将以相同的方式计算：23:00 + 8 小时 = 7:00
• 2025 年 4 月 1 日 7:00 为非工作时间，小于 8:00（声明 3）。下一个单元格的值将计算如下：差异 = 08:00 – 07:00 = 1 小时,diff * inc = 1 小时 * 1 = 1 小时,07:00 + 1 小时 = 08:00

2025 年 4 月 1 日 08:00 0f 是我们最早任务的日期。

如您所见，如果禁用skip_off_time属性，甘特图可以在具有最短日期的任务之前添加多个空单元格。如果您希望甘特图只创建一个单元格而不管该属性是否启用，您可以应用以下逻辑：

gantt.date.add_day_custom = function (date, inc) {    // When the work_time is enabled and the tasks are loaded,    // calculate the date for the first cell.    // Go from right to left starting from the minimal date,    // get the closest date within the working hours    // and subtract 1 hour from this date    if (inc < 0 && gantt.getTaskByTime().length) {        return gantt.calculateEndDate({            start_date: date, duration: -1, unit: gantt.config._duration_unit        })    }    // the beginning of the working hours (workday);    // calculate when the workday ends    if (date.getHours() == 8) {        return gantt.calculateEndDate(date, 8);    }    // the end of the working hours (workday);    // calculate when the next working day begins    if (date.getHours() == 17) {        return gantt.date.add(date, 15 * inc, "hour");    }    // if tasks are loaded, calculate the working dates for the second cell of scale    // if tasks are absent, calculate the dates for all scale cells    date = gantt.date.add(date, 1 * inc, "day");    gantt.date.day_start(date);    date = gantt.getClosestWorkTime({ date, dir: "future" })    return date};gantt.config.scales = [    { unit: "day_custom", step: 1, date: "%d %H:%i" },];gantt.config.work_time = true;gantt.config.skip_off_time = false;

这是隐藏非工作时间时比例在模式下的外观：

以下是它们显示时的样子（gantt.config.skip_off_time已禁用）：

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理控件应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及 价。

甘特图控件交流群：764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询，请点这里！

标签：