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

在本文中，我們將回顧如何在Web項目中使用DHTMLX Gantt工作日歷功能的有趣示例。

DHTMLX Gantt中工作日歷背后的關(guān)鍵概念

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

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

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

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

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

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

• 全時日歷
• 全局日歷
• 自定義日歷

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

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

工作時間日歷的用例

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

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

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

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

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

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

考慮一下這些例子：

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

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

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

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

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

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

– 星期五的工作時間：

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

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