DHTMLX Suite UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕松組合到單個應用程序界面中。

DHTMLX Gantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表，可滿足項目管理應用程序的所有需求，是完善的甘特圖圖表庫。

在項目管理中，合理利用時間起著至關重要的作用。當在甘特圖中處理大量任務時，有必要騰出時間來指定它們的持續時間。因此，用日歷功能來補充它是一個好主意，這樣可以更方便地進行時間管理，您可以依賴經過時間驗證的DHTMLX Calendar，替代使用某些第三方工具。

在這篇博文中，您將學習使用Suite UI庫中的JavaScript日歷小部件和DHTMLX Gantt的場景。

在上文中（點擊這里回顧>>），我們為大家介紹了“開始日期和結束日期”這個使用場景，接下來將介紹第三個場景，一起來看看吧~

日歷在彈出式菜單編輯截止日期

最后我們想與您分享如何使用DHTMLX Suite庫中的Calendar小部件在甘特圖時間軸中演示任務截止日期。

這種自定義看起來很不尋常，所以讓我們介紹一下它在實踐中應該如何工作。在時間軸上雙擊截止日期元素后，可以更改截止日期或將其刪除。如果給定的任務沒有截止日期，而最終用戶希望添加此參數，則只需雙擊時間軸中所需的任務行并添加截止日期。

現在，我們進入這個自定義的實現階段。

在這種情況下，使用額外的層繪制最后期限。自定義元素使用屬性進行補充，其中應該指定任務ID。

gantt.attachEvent("onGanttReady", function () {
gantt.addTaskLayer(function drawPlanned(task) {
if (task.deadline) {
const sizes = gantt.getTaskPosition(task, task.deadline, task.deadline);
const el = document.createElement('div');
el.className = 'deadline';
el.setAttribute("data-taskId", task.id);
el.style.left = sizes.left + 'px';
el.style.top = sizes.top + 7 + 'px';
return el;
}
return false;
});
});

雙擊鼠標的事件處理程序以以下方式添加：

window.addEventListener('dblclick', function (e) {

使用此處理程序，您可以檢查是否已經打開了用于編輯截止日期的對話框窗口。如果是，則必須使用return語句終止函數。

if (document.querySelector(".deadline_editor")) {
return
}

接下來應該做的是獲取截止日期的DOM元素或時間軸中的任務行。

const deadlineNode = e.target.closest(".deadline");
const taskRowNode = e.target.closest(".gantt_task_row");

const targetNode = deadlineNode || taskRowNode;

DOM元素的屬性幫助您獲取任務ID，該ID將在getTask()方法中用于獲取任務對象。

const taskId = targetNode.dataset.taskId || targetNode.dataset.taskid;
const task = gantt.getTask(taskId);

如果在時間軸上雙擊單元格后，它已經有了截止日期，那么該操作很可能不是為了更改截止日期，而是為了更改其他內容。因此在這種情況下，應該用return語句結束函數。

if (taskRowNode && task.deadline) {
return
}

然后您必須為一項任務設定截止日期，從任務的相應截止日期屬性中獲取。如果任務沒有截止日期，則需要從時間軸中的單擊中獲取日期，為此使用getRelativeEventPosition()方法。該方法的第一個參數是click事件itself (`e`)，第二個參數是時間軸的DOM元素，該方法將返回時間軸中的點擊位置。接下來，使用dateFromPos()方法從單擊位置獲取日期。

let deadlineDate;
if (task.deadline){
deadlineDate = new Date(task.deadline);
}
else {
const clickPos = gantt.utils.dom.getRelativeEventPosition(e, gantt.$task_data);
deadlineDate = gantt.dateFromPos(clickPos.x);
}

下面的步驟是創建一個彈出實例并向其添加HTML內容，將有保存更改、刪除截止日期的按鈕，以及用于選擇日期和時間的日歷本身。

const popup = new dhx.Popup({
css: "deadline_editor dhx_widget--bordered"
});
popup.attachHTML("<div id='form_container'></div><div id='calendar_container'></div>");

之后，日歷顯示在單擊的元素下面。

popup.show(targetNode);

日歷只有在重新繪制后才能添加到彈出框中，因此您需要將以下代碼放入函數中，該函數將在彈出式重繪后啟動：

dhx.awaitRedraw().then(function () {
// code
});

當重新繪制彈出窗口時，需要添加一個新的日歷實例。在本例中，您指定容器的ID，日歷應該在容器中初始化。

const calendar = new dhx.Calendar("calendar_container", {
value: deadlineDate,
dateFormat: gantt.config.date_format,
timePicker: true,
css: "dhx_widget--bordered"
});

下一步是添加一個事件處理程序，該處理程序將在日歷中選擇日期或時間時觸發，并將所選日期添加到deadlineDate變量。

calendar.events.on("change", function (date) {
deadlineDate = date;
});

現在是時候創建一個表單了，您可以在其中顯示兩個按鈕。在CSS屬性中，指定dhx_widget-border_bottom來在按鈕下呈現框架，并在視覺上將帶有按鈕的表單與日歷分開。在align參數中，可以設置頁面寬度的對齊方式。

const form = new dhx.Form("form_container", {
rows: [
{
css: "dhx_widget--border_bottom",
align: "evenly",
cols: [
{ name: "save", view: "flat", text: "Save", type: "button", },
{ name: "delete", view: "link", text: "Delete", type: "button", },
]
},
]
});

最后您必須向表單添加事件處理程序，當按鈕被點擊時，這些處理程序將被觸發。在一個事件處理程序中，您可以為任務指定截止日期值，而在另一個事件處理程序中，您應該刪除截止日期屬性。之后，更新任務并隱藏彈出窗口。

form.getItem("save").events.on("click", function (events) {
task.deadline = deadlineDate;
gantt.updateTask(task.id);
popup.hide();
});

form.getItem("delete").events.on("click", function (events) {
if (task.deadline) {
delete task.deadline;
gantt.updateTask(task.id);
}
popup.hide();
});

這就是使用DHTMLX Suite庫中的日歷小部件在甘特圖時間軸中實現任務截止日期的方法。

總結

根據上面指南提供的說明，您可以在基于DHTMLX Gantt的項目管理應用程序中有效使用DHTMLX Suite的日歷小部件的三個選項。