dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

點擊下載dhtmlxGantt試用版

如果沒有工作時間日歷等有效的時間管理工具，很難想象一個成功的項目。在本文中，我們將展示如何在Web 項目中使用工作日歷功能的有趣示例。

DHTMLX 甘特圖中工作日歷背后的關鍵概念

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

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

如果啟用了work_time選項并且沒有其他任何更改，甘特圖就會開始考慮工作時間。也就是說，根據預定義的設置，周末/節假日完全不工作，工作時間設置為早上8點到下午5點，有1小時的午休時間。

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

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

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

• 全日制日歷
• 全球日歷
• 自定義日歷

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

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

工作時間日歷的用例

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

在全球日歷中設置周末/假期

在 DHTMLX Gantt 中，有多種方法可以指定工作時間設置。簡單來說，應用setWorkTime方法就足夠了。

此方法接受單個參數 - 具有以下屬性的工作時間配置對象：

• date – 將應用工作時間的日歷日期。該值必須是一個 js [日期對象]。
• day - 工作日數。該值必須是 0 到 6 之間的數字。0 表示星期日，1 表示星期一等。
• hours – 工作時間設置，值可以是 `true`、`false` 或工作時間數組。

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

考慮以下示例：

– 將 9 月 1 日定為假期：

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

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"]

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

在自定義日歷中設置周末/假期

首先，讓我們考慮如何在 DHTMLX Gantt 中生成自定義日歷。您可以使用addCalendar方法來做到這一點：

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

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

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

自定義日歷可以從現有日歷中獲取設置，您可以將現有日歷傳遞給gantt.getCalendar方法，該方法將創建您已有日歷的精確副本。

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

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_calendars配置的引擎蓋下使用 。這允許您創建日歷，將多個分配的資源日歷的設置組合在一起，顯示所有分配的資源同時可用。

該gantt.mergeCalendars方法也可以用來管理自定義日歷的周末/假期。您可以創建一個包含假期和休息日的日歷，并將其集成到您創建的任何工作時間日歷中。

在下面的示例中，您可以看到基于全局日歷和另一個自定義日歷的自定義工作日歷。默認情況下應用于所有任務的全局日歷的設置不會更改。全局日歷與自定義日歷合并，其中設置取自具有非工作日的數組。生成的自定義日歷從兩個日歷繼承工作時間設置（即所有非工作日）。

在日歷中突出顯示偶數星期六

有時，可能有必要在視覺上強調遵循某些條件的某些日子或時間段。下面的示例顯示了如何在日歷中突出顯示偶數星期六。該isWorkTime功能可以幫助找出一個特定的日期是否非工作和檢查更復雜的情況，如一周的奇數和偶數天。使用task_class突出顯示必要的天數。為甘特時間軸中的所有單元格調用此模板并返回類名。使用此模板，可以自定義 CSS 規則中的單元格。

從 MS Project 導入工作時間

與 MS Project 的兼容性是一個非常重要的 DHTMLX 甘特圖特性，受到許多開發人員的喜愛。它允許您導入/導出與您的項目相關的各種材料，包括工作時間日歷。此示例顯示如何從導入的 MS Project 文件中設置工作時間設置。這種流行的軟件工具通常會在其文件中添加工作日歷。在 MS Project 文件的導入過程中，工作時間設置與任務數據一起出現。這些設置的應用方式與第一個示例中討論的方式相同。

從 Excel 導入工作時間設置

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

管理工作時間

在 DHTMLX Gantt 中，可以啟用/禁用工作時間，下面的示例顯示了如何完成。每個任務都有三個日期參數—— start_date、end_date和duration。甘特圖將所有這些參數用于任務，但end_date具有更高的優先級。更改工作時間設置后，日期通常保持不變。因此，任務的持續時間將發生變化。為了保持工期不變，必須根據任務工期重新計算結束日期。

想要購買dhtmlxGantt正版授權，或了解慧都APS系統請點擊