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

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

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

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

開始日期的甘特圖內(nèi)聯(lián)編輯器中的日歷

我們從向甘特圖網(wǎng)格中的內(nèi)聯(lián)編輯器添加JavaScript日歷開始，內(nèi)聯(lián)編輯器附帶了多種預(yù)定義的編輯器類型。如果您需要一些特殊的東西(例如日歷)來(lái)快速設(shè)置任務(wù)的開始日期和時(shí)間，則有必要?jiǎng)?chuàng)建自定義內(nèi)聯(lián)編輯器。

讓我們更詳細(xì)地描述一下如何做到這一點(diǎn)。

第一步是在show()方法中創(chuàng)建HTML元素，這些元素將在打開自定義編輯器時(shí)顯示。

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小部件應(yīng)該添加到set_value()方法中。

在函數(shù)的開頭，您會(huì)得到一個(gè)任務(wù)對(duì)象：

set_value: function (value, id, column, node) {
const task = gantt.getTask(id)

之后，您需要?jiǎng)?chuàng)建一個(gè)新的calendar對(duì)象：

const calendar = new dhx.Calendar(null, { value: task.start_date, dateFormat: "%d/%m/%y %H:%i", timePicker: true, css: "dhx_widget--bordered" });

在第一個(gè)參數(shù)中，指定應(yīng)該顯示日歷的容器。您應(yīng)該使用null來(lái)創(chuàng)建一個(gè)新的calendar對(duì)象，但不要將其添加到頁(yè)面中，第二個(gè)參數(shù)是一個(gè)具有日歷配置的對(duì)象。

value參數(shù)顯示在打開日歷時(shí)將突出顯示的日期。

value: task.start_date

接下來(lái)是日期格式：

dateFormat: "%d/%m/%y %H:%i",

如果您希望在日歷中不僅可以設(shè)置日期，還可以設(shè)置時(shí)間，可以通過(guò)添加timePicker參數(shù)(將其值設(shè)置為true)來(lái)實(shí)現(xiàn)。

timePicker: true

CSS參數(shù)指定日歷將接收的類的名稱。

css: "dhx_widget--bordered"

我們文檔的這一部分給出了當(dāng)使用特定類名時(shí)將被添加的CSS類列表。

然后創(chuàng)建彈出對(duì)象并在其中添加日歷。

const popup = new dhx.Popup();
popup.attach(calendar);

之后您必須找到一個(gè)輸入元素，并將從日歷中獲得的日期值添加到該元素。

const dateInput = document.querySelector("#calendar");
dateInput.value = calendar.getValue();

因此在單擊該元素之后，將顯示帶有日歷的彈出窗口。

dateInput.addEventListener("click", function () {
popup.show(dateInput);
});

在日歷中選擇日期或時(shí)間時(shí)，輸入元素中的值也將被更新。

calendar.events.on("change", function (date) {
dateInput.value = calendar.getValue();
// uncomment to hide the popup with calendar after changing the date
// popup.hide();
});

在當(dāng)前的情況下，用戶可以選擇一個(gè)日期，然后通過(guò)選擇另一個(gè)日期來(lái)修改它，或者在Calendar彈出窗口保持顯示的同時(shí)設(shè)置時(shí)間。要保存輸入的值，需要單擊甘特圖中的空白區(qū)域。結(jié)果，內(nèi)聯(lián)編輯器將關(guān)閉，并保存值。

如果使用示例中的popup.hide()方法取消注釋行，則在更改日期或時(shí)間后立即隱藏帶有日歷的彈出窗口，但內(nèi)聯(lián)編輯器本身將保持打開狀態(tài)。要應(yīng)用更改，還需要單擊甘特圖中的空白區(qū)域。

在get_value()方法中，從輸入元素獲取日期值，將該值從字符串轉(zhuǎn)換為日期對(duì)象，然后為任務(wù)指定一個(gè)新的日期。

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()方法中，檢查當(dāng)前日期是否與打開內(nèi)聯(lián)編輯器時(shí)顯示的日期不同。

is_changed: function (value, id, column, node) {
return +value != +this.get_value(id, column, node);
},

這些是在將DHTMLX Suite的Calendar添加到DHTMLX Gantt內(nèi)聯(lián)編輯器時(shí)必須考慮的關(guān)鍵技術(shù)特性。

未完待續(xù)，篇幅有限，下期繼續(xù)講~