项目管理软件dhtmlxGantt配置教程（十二）：如何自定义时间单位-控件新闻-慧都网

项目管理软件dhtmlxGantt配置教程（十二）：如何自定义时间单位

翻译|使用教程|编辑：秦林|2022-10-20 09:20:27.963|阅读 342 次

概述：这篇文章给大家带来dhtmlxGantt如何自定义时间的单位。

自定义时间单位

dhtmlxGantt 允许您定义自定义时间单位并在比例配置中为标签设置模板。

要定义自定义单位，您需要在Date 对象中定义 2 个函数：

Date gantt.date.<unit>_start(Date date);
Date gantt.date.add_<unit>(Date date, Integer increment);

第一个函数应返回任何给定日期的开始时间单位（例如，2 月 14 日 -> 2 月 1 日的 month_start）。
第二个函数将日期增加任何给定的持续时间单位数（例如“日期减 2 天”）

示例 1

让我们创建一个“fiscal_year”单位并假设一个财政年度将在 1 月 31 日结束。这是指定新单位的方式：

var firstMonth = 1,
    firstDay = 1;
 
gantt.date.fiscal_year_start = function(date){       
   var next = new Date(date);
   if(next.getMonth() < firstMonth || 
      (next.getMonth() === firstMonth && next.getDate() < firstDay)){
      next = gantt.date.add(next, -1, "year"); 
   }
 
  next = gantt.date.year_start(next);
  next.setMonth(firstMonth);
  next.setDate(firstDay);
 
  return next;
}; 
 
gantt.date.add_fiscal_year = function(date, inc){    
   return gantt.date.add(date, inc, "year");
};

然后在代码中使用它，如下所示：

var dateToStr = gantt.date.date_to_str("%Y");
function fiscalYearLabel(date){
    return dateToStr(gantt.date.fiscal_year_start(date));
};
 
gantt.config.scales = [
  {unit:"year", step:1, format:"Calendar year %Y"},
  {unit:"fiscal_year", step:1, format:fiscalYearLabel},
  {unit:"month", step: 1, format: "%M %Y"},
  {unit:"day", step: 1, format:"%d %M"}
];

示例 2

您可以将每个“日”单元格划分为三个“小时”单元格，标签分别为 00、08、16。逻辑如下所示：

gantt.date.hour_custom_start = function (date) {
    return date;
};
 
gantt.date.add_hour_custom = function (date, inc) { // inc depends on the "step" 
    const nextDate = new Date(date);
    if (nextDate.getHours() % 8 != 0) { // the hour value is not 0, 8 or 16 
        const diff = Math.abs(8 - nextDate.getHours()); 
        return gantt.date.add(nextDate, diff * inc, "hour"); 
    } 
    return gantt.date.add(date, 8 * inc, "hour"); 
};
 
gantt.config.scales = [
    { unit: "day", step: 1, date: "%d %F" },
    { unit: "hour_custom", step: 1, date: "%H" },
];
 
gantt.config.date_grid = "%Y-%m-%d %H:%i"

让我们考虑一下甘特如何创建第一个“小时”单元格。从示例中可以看出，最早的任务从 07:00 开始。但是 7 不是 8 的倍数，因此甘特图遵循以下规则：

if (nextDate.getHours() % 8 != 0) {
    const diff = Math.abs(8 - nextDate.getHours());  // 8 - 7 = 1
    return gantt.date.add(nextDate, diff * inc, "hour"); // 7 - 1 = 6
}

甘特图计算 8:00 和 7:00 之间的时间间隔：diff = 08:00 - 07:00 = 1 小时
然后，甘特求时间间隔和增量的乘积：diff * inc = 1 小时 * (-1) = -1 小时，作为inc参数的值，甘特使用时间步长的负值 ( -1 )。
最后，甘特将接收到的值与最早任务的时间相加：07:00 + (- 1 小时) = 06:00，第一个单元格的值为06。

为了创建第二个“小时”单元格，甘特图遵循相同的逻辑，但使用正增量