這篇文章給大家帶來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;

為了計算這些單元格的值，應用以下邏輯：

• 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    歡迎進群交流討論

更多正版甘特圖軟件下載、購買、授權咨詢，請點這里！