DHTMLX Suite UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕鬆組合到單個應用程序界面中。
DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表，可滿足項目管理應用程序的所有需求，是完善的甘特圖圖表庫。
在項目管理中，合理利用時間起着至關重要的作用。當在甘特圖中處理大量任務時，有必要騰出時間來指定它們的持續時間。因此，用日曆功能來補充它是一個好主意，這樣可以更方便地進行時間管理，您可以依賴經過時間驗證的DHTMLX Calendar，替代使用某些第三方工具。
在這篇博文中，您將學習使用Suite UI庫中的JavaScript日曆小部件和DHTMLX Gantt的場景。
開始日期的甘特圖內聯編輯器中的日曆
我們從向甘特圖網格中的內聯編輯器添加JavaScript日曆開始，內聯編輯器附帶了多種預定義的編輯器類型。如果您需要一些特殊的東西(例如日曆)來快速設置任務的開始日期和時間，則有必要創建自定義內聯編輯器。
讓我們更詳細地描述一下如何做到這一點。
第一步是在show()方法中創建HTML元素，這些元素將在打開自定義編輯器時顯示。
gantt.config.editor_types.custom_editor = {
show: function (id, column, config, placeholder) {
const html = `<div class='dhx_calendar_container'>
<input type="text" id="calendar" readonly data-widget-control style="margin-left: 10px;">
</div>`;
placeholder.innerHTML = html;
},
Calendar小部件應該添加到set_value()方法中。
在函數的開頭，您會得到一個任務對象：
set_value: function (value, id, column, node) {
const task = gantt.getTask(id)
之後，您需要創建一個新的calendar對象：
const calendar = new dhx.Calendar(null, { value: task.start_date, dateFormat: "%d/%m/%y %H:%i", timePicker: true, css: "dhx_widget--bordered" });
在第一個參數中，指定應該顯示日曆的容器。您應該使用null來創建一個新的calendar對象，但不要將其添加到頁面中，第二個參數是一個具有日曆配置的對象。
value參數顯示在打開日曆時將突出顯示的日期。
value: task.start_date
接下來是日期格式：
dateFormat: "%d/%m/%y %H:%i",
如果您希望在日曆中不僅可以設置日期，還可以設置時間，可以通過添加timePicker參數(將其值設置爲true)來實現。
timePicker: true
CSS參數指定日曆將接收的類的名稱。
css: "dhx_widget--bordered"
我們文檔的這一部分給出了當使用特定類名時將被添加的CSS類列表。
然後創建彈出對象並在其中添加日曆。
const popup = new dhx.Popup(); popup.attach(calendar);
之後您必須找到一個輸入元素，並將從日曆中獲得的日期值添加到該元素。
const dateInput = document.querySelector("#calendar");
dateInput.value = calendar.getValue();
因此在單擊該元素之後，將顯示帶有日曆的彈出窗口。
dateInput.addEventListener("click", function () {
popup.show(dateInput);
});
在日曆中選擇日期或時間時，輸入元素中的值也將被更新。
calendar.events.on("change", function (date) {
dateInput.value = calendar.getValue();
// uncomment to hide the popup with calendar after changing the date
// popup.hide();
});
在當前的情況下，用戶可以選擇一個日期，然後通過選擇另一個日期來修改它，或者在Calendar彈出窗口保持顯示的同時設置時間。要保存輸入的值，需要單擊甘特圖中的空白區域。結果，內聯編輯器將關閉，並保存值。
如果使用示例中的popup.hide()方法取消註釋行，則在更改日期或時間後立即隱藏帶有日曆的彈出窗口，但內聯編輯器本身將保持打開狀態。要應用更改，還需要單擊甘特圖中的空白區域。
在get_value()方法中，從輸入元素獲取日期值，將該值從字符串轉換爲日期對象，然後爲任務指定一個新的日期。
get_value: function (id, column, node) {
const newValue = node.querySelector("input").value;
const dateValue = gantt.date.str_to_date("%d-%m-%y %H:%i")(newValue)
return dateValue;
},
在is_changed()方法中，檢查當前日期是否與打開內聯編輯器時顯示的日期不同。
is_changed: function (value, id, column, node) {
return +value != +this.get_value(id, column, node);
},
這些是在將DHTMLX Suite的Calendar添加到DHTMLX Gantt內聯編輯器時必須考慮的關鍵技術特性。
未完待續，篇幅有限，下期繼續講~