dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創(chuàng)建動態(tài)甘特圖，并以一個方便的圖形化方式可視化項(xiàng)目進(jìn)度。有了dhtmlxGantt，你可以顯示活動之間的依賴關(guān)系，顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動到樹結(jié)構(gòu)。

點(diǎn)擊下載dhtmlxGantt試用版

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

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

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

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

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

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

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

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

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

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

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

工作時間日歷的用例

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

在全球日歷中設(shè)置周末/假期

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

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

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

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

考慮以下示例：

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

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

在自定義日歷中設(shè)置周末/假期

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

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

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

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

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

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

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

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

從 MS Project 導(dǎo)入工作時間

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

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

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

管理工作時間

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

想要購買dhtmlxGantt正版授權(quán)，或了解慧都APS系統(tǒng)請點(diǎn)擊