如果沒有有效的時間管理工具，如工作時間日歷，很難想象一個項目如何成功運轉。這就是為什么我們的開發團隊非常重視項目管理，并提供了多種選擇來安排DHTMLX Gantt的工作時間。使用DHTMLX Gantt這個JavaScript庫，您可以創建一個強大的甘特圖，并用一個或多個工作時間日歷來補充它。

在本文中，我們將回顧如何在Web項目中使用DHTMLX Gantt工作日歷功能的有趣示例。在上文中我們主要為大家介紹了DHTMLX Gantt中工作日歷背后的關鍵概念（點擊這里回顧>>），本文將繼續介紹如何設置工作時間日歷的用例。

工作時間日歷的用例

現在我們繼續在實際場景中使用DHTMLX Gantt的工作時間日歷功能的實際示例。

在自定義日歷中設置周末/假日

首先，考慮如何在DHTMLX Gantt中生成自定義日歷，您可以使用addCalendar方法：

gantt.addCalendar({
id:"custom", // optional
worktime: {
hours: ["8:00-17:00"],
days: [ 1, 1, 1, 1, 1, 1 ,1]
}
});

之后，您可以像使用全局日歷一樣為該日歷設置自定義假日：

const calendar = gantt.getCalendar("custom");
calendar.setWorkTime({
date:new Date(2021,8,1),
hours:false
});

這樣的日歷可以分配給任何任務：

{
"id":1, "calendar_id":"custom", "text":"Task #1", "start_date":"02-04-2019",
"duration":"8", "parent":"1"
}

或資源：

gantt.config.resource_calendars = {
//[resourceId]: calendarId
1: "custom"
};

自定義日歷可以從現有日歷中獲取設置，您可以將現有日歷傳遞給gantt.getCalendar方法，該方法將創建您已經擁有的日歷的精確副本。

之后，您可以用自己喜歡的方式自定義新的日歷：

const calendarId = gantt.addCalendar(gantt.getCalendar("global"));
const calendar = gantt.getCalendar(calendarId);
calendar.setWorkTime({
date:new Date(2021,8,1),
hours:false
});

最后，您可以使用合并函數的gantt.mergeCalendars方法將多個日歷合并為一個日歷。

const johnCalendarId = gantt.addCalendar({
worktime: {
hours: ["7:00-11:00", "12:00-16:00"],
days: [1, 1, 1, 1, 1, 0, 0]
}
});
const mikeCalendarId = gantt.addCalendar({
worktime: {
hours: ["8:00-12:00", "13:00-17:00"],
days: [0, 1, 1, 1, 1, 1, 0]
}
});

// get common work times of both:
const joinedCalendar = gantt.mergeCalendars([
gantt.getCalendar(mikeCalendarId),
gantt.getCalendar(johnCalendarId)
]);

// the result is equivalent to the following:
// worktime: {
// hours: ["8:00-11:00", "13:00-16:00"],
// days: [0, 1, 1, 1, 1, 0, 0]
// }

這個方法是在dynamic_resource_calendar配置中使用的，允許您創建合并多個已分配資源日歷設置的日歷，來顯示所有已分配資源何時同時可用。

gant.mergecalendars方法也可用于管理自定義日歷的周末/假日，您可以創建一個包含假日和休息日的日歷，并將其集成到您創建的任何工作時間日歷中。

在下面的示例中，您可以看到基于全局日歷和另一個自定義日歷的自定義工作日歷。默認情況下應用于所有任務的全局日歷設置不會更改。全局日歷與自定義日歷合并，自定義日歷的設置取自包含非工作日的數組，由此產生的自定義日歷繼承兩個日歷的工作時間設置(即所有非工作日)。

在日歷上突出顯示偶數的星期六

有時可能有必要在視覺上強調遵循某些條件的某些天或時間段，下面的示例展示了如何在日歷中突出顯示偶數星期六。isWorkTime函數幫助查找特定日期是否不工作，并檢查更復雜的條件，例如一周中的奇數和偶數天，使用task_class突出顯示必要的天數。此模板將對甘特圖時間軸中所有單元格調用，并返回類名。有了這個模板，就可以在CSS規則中自定義單元格。

從MS項目導入工作時間

與MS Project的兼容性是DHTMLX Gantt一個非常重要的功能，受到許多開發者的喜愛。它允許您導入/導出與項目相關的各種材料，包括工作時間日歷，這個例子展示了如何從導入的MS Project文件中設置工作時間設置。這個流行的軟件工具通常會在其文件中添加工作日歷，在導入MS Project文件的過程中，工作時間設置與任務數據一起出現，可以按照第一個示例中討論的方式應用這些設置。

從Excel導入工作時間設置

由于DHTMLX Gantt還支持從Excel導出/導入，因此您可以使用此功能使用通用Excel文件存儲和加載工作時間設置。在服務器端進行轉換后，數據以JSON格式發送到甘特圖頁面，您還可以以JSON格式從數組中獲取所需的日期，并使用setWorkTime方法指定工作時間設置。

管理工作時間

在DHTMLX Gantt中，可以啟用/禁用工作時間，下面的示例展示了如何實現。每個任務有三個日期參數——start_date、end_date和duration，Gantt將所有這些參數用于任務，但end_date具有更高的優先級。當工作時間設置更改時，日期通常保持不變，因此任務的持續時間會發生變化。為了保持持續時間不變，必須根據任務持續時間重新計算結束日期。