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內聯編輯器時必須考慮的關鍵技術特性。

未完待續，篇幅有限，下期繼續講~