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

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

DHTMLX Gantt中工作日歷背后的關鍵概念

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

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

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

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

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

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

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

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

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

工作時間日歷的用例

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

在全局日歷中設置周末/節假日

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

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

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

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

考慮一下這些例子：

– 將9月1日定為節假日：

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

– 設置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"]

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