這篇文章給大家?guī)?lái)dhtmlxGantt如何自定義時(shí)間的跨度。

DhtmlxGantt正版試用下載

在本部分中，您將找到有關(guān)如何自定義和配置時(shí)間刻度以顯示或隱藏非工作時(shí)間跨度的示例。此外，即使啟用了skip_off_time模式，您也會(huì)找到一個(gè)示例，說(shuō)明如何從比例開(kāi)始隱藏具有非工作時(shí)間的單元格。

下面我們?yōu)槟峁┮粋€(gè)自定義比例示例，該示例適用于工作時(shí)間為 08:00 至 12:00 和 13:00 至 17:00 的最常見(jiàn)情況。

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;

假設(shè)最早的任務(wù)將在 2025 年 4 月 1 日 08:00 開(kāi)始，并考慮甘特將如何根據(jù)gantt.config.skip_off_time的值在此任務(wù)之前添加偏移量。

我們將從在時(shí)間尺度中隱藏非工作時(shí)間的配置開(kāi)始：

gantt.config.skip_off_time = true;

 在這種情況下，為了創(chuàng)建第一個(gè)“小時(shí)”單元格，甘特圖將減少最早任務(wù)的小時(shí)數(shù)，直到時(shí)間達(dá)到前一天的工作時(shí)間。

• 首先，甘特圖將從 2025 年 4 月 1 日 08:00 減去 9 小時(shí)（語(yǔ)句 2）：08:00 - 9 小時(shí) = 23:00
• 由于 23:00 是不滿足任何條件的非工作時(shí)間，甘特圖將通過(guò)減去 8 小時(shí)再次減少時(shí)間：23:00 - 8 小時(shí) = 15:00
• 由此產(chǎn)生的時(shí)間 - 2025 年 3 月 31 日 15:00 - 被視為工作時(shí)間。

因此，31 15:00是將顯示在第一個(gè)單元格上的值。

要了解甘特如何計(jì)算所有其他單元格，讓我們禁用gantt.config.skip_off_time：

gantt.config.skip_off_time = false;

為了計(jì)算這些單元格的值，應(yīng)用以下邏輯：

• 2025年3月31日15:00為不符合規(guī)定條件的工作時(shí)間。因此，要計(jì)算第二個(gè)單元格的值，甘特圖將通過(guò)添加 8 小時(shí)來(lái)增加時(shí)間：15:00 + 8 小時(shí) = 23:00
• 2025年3月31日23:00是非工作時(shí)間，也不符合任何條件。因此，第三個(gè)單元格的值將以相同的方式計(jì)算：23:00 + 8 小時(shí) = 7:00
• 2025 年 4 月 1 日 7:00 為非工作時(shí)間，小于 8:00（聲明 3）。下一個(gè)單元格的值將計(jì)算如下：差異 = 08:00 - 07:00 = 1 小時(shí),diff * inc = 1 小時(shí) * 1 = 1 小時(shí),07:00 + 1 小時(shí) = 08:00

2025 年 4 月 1 日 08:00 0f 是我們最早任務(wù)的日期。

如您所見(jiàn)，如果禁用skip_off_time屬性，甘特圖可以在具有最短日期的任務(wù)之前添加多個(gè)空單元格。如果您希望甘特圖只創(chuàng)建一個(gè)單元格而不管該屬性是否啟用，您可以應(yīng)用以下邏輯：

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;

這是隱藏非工作時(shí)間時(shí)比例在模式下的外觀：

以下是它們顯示時(shí)的樣子（gantt.config.skip_off_time已禁用）：

dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表，可滿足項(xiàng)目管理控件應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫(kù)。了解更多DhtmlxGantt相關(guān)內(nèi)容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報(bào)價(jià)。

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

更多正版甘特圖軟件下載、購(gòu)買(mǎi)、授權(quán)咨詢，請(qǐng)點(diǎn)這里！