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

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

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

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

在上文中（點(diǎn)擊這里回顧>>），我們?yōu)榇蠹医榻B了“開始日期和結(jié)束日期”這個使用場景，接下來將介紹第三個場景，一起來看看吧~

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

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

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

現(xiàn)在，我們進(jìn)入這個自定義的實(shí)現(xiàn)階段。

在這種情況下，使用額外的層繪制最后期限。自定義元素使用屬性進(jìn)行補(bǔ)充，其中應(yīng)該指定任務(wù)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;
});
});

雙擊鼠標(biāo)的事件處理程序以以下方式添加：

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

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

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

接下來應(yīng)該做的是獲取截止日期的DOM元素或時間軸中的任務(wù)行。

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

const targetNode = deadlineNode || taskRowNode;

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

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

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

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

然后您必須為一項(xiàng)任務(wù)設(shè)定截止日期，從任務(wù)的相應(yīng)截止日期屬性中獲取。如果任務(wù)沒有截止日期，則需要從時間軸中的單擊中獲取日期，為此使用getRelativeEventPosition()方法。該方法的第一個參數(shù)是click事件itself (`e`)，第二個參數(shù)是時間軸的DOM元素，該方法將返回時間軸中的點(diǎn)擊位置。接下來，使用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);
}

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

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);

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

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

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

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

下一步是添加一個事件處理程序，該處理程序?qū)⒃谌諝v中選擇日期或時間時觸發(fā)，并將所選日期添加到deadlineDate變量。

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

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

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", },
]
},
]
});

最后您必須向表單添加事件處理程序，當(dāng)按鈕被點(diǎn)擊時，這些處理程序?qū)⒈挥|發(fā)。在一個事件處理程序中，您可以為任務(wù)指定截止日期值，而在另一個事件處理程序中，您應(yīng)該刪除截止日期屬性。之后，更新任務(wù)并隱藏彈出窗口。

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庫中的日歷小部件在甘特圖時間軸中實(shí)現(xiàn)任務(wù)截止日期的方法。

總結(jié)

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