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

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

工作時間日歷的用例

現(xiàn)在我們繼續(xù)在實際場景中使用DHTMLX Gantt的工作時間日歷功能的實際示例。

在自定義日歷中設(shè)置周末/假日

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

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

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

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

這樣的日歷可以分配給任何任務(wù)：

{
"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"
};

自定義日歷可以從現(xiàn)有日歷中獲取設(shè)置，您可以將現(xiàn)有日歷傳遞給gantt.getCalendar方法，該方法將創(chuàng)建您已經(jīng)擁有的日歷的精確副本。

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

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

最后，您可以使用合并函數(shù)的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配置中使用的，允許您創(chuàng)建合并多個已分配資源日歷設(shè)置的日歷，來顯示所有已分配資源何時同時可用。

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

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

在日歷上突出顯示偶數(shù)的星期六

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

從MS項目導入工作時間

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

從Excel導入工作時間設(shè)置

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

管理工作時間

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