使用JavaScript日曆小部件和DHTMLX Gantt的應用場景(三)

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

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

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

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

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

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

使用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的日曆小部件的三個選項。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章