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

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

工作時(shí)間日歷的用例

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

在自定義日歷中設(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方法將多個(gè)日歷合并為一個(gè)日歷。

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]
// }

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

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

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

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

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

從MS項(xiàng)目導(dǎo)入工作時(shí)間

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

從Excel導(dǎo)入工作時(shí)間設(shè)置

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

管理工作時(shí)間

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