如果沒有有效的時(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)鍵概念

首先，讓我們考慮一下甘特圖組件是如何處理日期和日歷的。

默認(rèn)情況下，當(dāng)禁用work_time選項(xiàng)時(shí)，任務(wù)的持續(xù)時(shí)間取決于duration_unit參數(shù)和任務(wù)日期(開始和結(jié)束)，而工作和非工作時(shí)間將被忽略。在這種情況下，就像在MS Project中一樣，使用了全時(shí)日歷。

如果啟用了work_time選項(xiàng)，并且沒有更改其他選項(xiàng)，則Gantt開始考慮工作時(shí)間。換句話說，根據(jù)預(yù)定義的設(shè)置，周末/節(jié)假日被視為完全不工作，工作時(shí)間從早上8點(diǎn)到下午5點(diǎn)，午休時(shí)間為1小時(shí)。

從表面上看，Gantt似乎已經(jīng)開始利用工作時(shí)間，但實(shí)際上，它利用了一個(gè)應(yīng)用于所有任務(wù)的全局日歷，該日歷的設(shè)置是通過setWorkTime方法指定的。

 此外，還可以為每個(gè)任務(wù)或任務(wù)組設(shè)置單獨(dú)的工作時(shí)間設(shè)置，這是在自定義日歷的幫助下實(shí)現(xiàn)的。使用createCalendar和addCalendar方法創(chuàng)建這樣一個(gè)日歷，要將此日歷分配給某個(gè)任務(wù)，必須在任務(wù)對(duì)象的calendar_id參數(shù)中指定日歷的ID。

綜上所述，我們可以區(qū)分出在甘特圖項(xiàng)目中使用工作時(shí)間功能的三種方式：

• 全時(shí)日歷
• 全局日歷
• 自定義日歷

利用豐富的DHTMLX Gantt API，您可以使用工作日歷做很多有用的事情。

例如，可以將工作日歷分配給特定的任務(wù)、資源(如上圖所示)或項(xiàng)目。除此之外，我們的dhtmlxGantt組件允許對(duì)一個(gè)日歷中的特定時(shí)間段應(yīng)用不同的工作時(shí)間規(guī)則，將多個(gè)日歷合并為一個(gè)日歷，并動(dòng)態(tài)更改它們。

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

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

在全局日歷中設(shè)置周末/節(jié)假日

在DHTMLX Gantt中，有幾種方法可以指定工作是回見設(shè)置。以一種簡(jiǎn)單的方式，應(yīng)用setWorkTime方法就足夠了。

該方法接受一個(gè)參數(shù) - worktime配置對(duì)象，它具有以下屬性：

• date – 將應(yīng)用工作時(shí)間的日歷日期，必須是js[Date object]。
• day – 工作日編號(hào)，取值范圍為0 ~ 6之間的數(shù)字，周日為0，周一為1，以此類推。
• hours – 工作時(shí)間設(shè)置，該值可以是“true”、“false”或工作時(shí)間數(shù)組。

該對(duì)象必須包含日期和小時(shí)或日和小時(shí)屬性，這些屬性允許將工作時(shí)間規(guī)則設(shè)置為特定的星期或特定的日期。

考慮一下這些例子：

– 將9月1日定為節(jié)假日：

gantt.setWorkTime({
date:new Date(2021,8,1),
hours:false
});

– 設(shè)置9月1日的自定義工作時(shí)間：

gantt.setWorkTime({
date:new Date(2021,8,1),
hours: ["8:00-11:00", "12:00-14:00"]
});

– 將星期日定為工作日，采用全局工作時(shí)間；

gantt.setWorkTime({
day: 0,
hours: true
});

– 星期五的工作時(shí)間：

gantt.setWorkTime({
day: 5,
hours: ["8:00-10:00"]

日期可以存儲(chǔ)在服務(wù)器上，然后加載到甘特圖項(xiàng)目中。下面的示例包含一個(gè)日期數(shù)組，在使用此數(shù)組中的日期之前，必須將它們從字符串格式轉(zhuǎn)換為日期格式。之后可以在setWorkTime方法中使用日期，因此非工作日從數(shù)組中取出并應(yīng)用于所有任務(wù)。