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

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

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

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

在上文中（點擊這里回顧>>），我們?yōu)榇蠹医榻B了“開始日期的甘特圖內(nèi)聯(lián)編輯器中的日歷”這個使用場景，接下來將介紹第二個場景，一起來看看吧~

甘特圖任務(wù)Lightbox中的兩個日歷用于開始日期和結(jié)束日期

第二個場景將讓您了解如何在任務(wù)中用start_date和end_date參數(shù)兩個日歷來豐富lightbox的功能。

在lightbox中，您可以為給定任務(wù)設(shè)置開始和結(jié)束日期。因此您可以顯示兩個相互關(guān)聯(lián)的日歷，一個與開始日期綁定，另一個與結(jié)束日期綁定。

標準lightbox部分不適合這個目的，所以您需要創(chuàng)建一個自定義的lightbox部分。

從render()方法開始，您應(yīng)該在其中添加HTML元素，以顯示具有任務(wù)持續(xù)時間的兩個日歷，該函數(shù)在lightbox打開時被調(diào)用。

render: function (sns) {
return `<div class='dhx_calendar_cont'>
<input type="text" id="startDateCalendar" readonly data-widget-control style="margin-left: 10px;">
&#8211;
<input type="text" id="endDateCalendar" readonly data-widget-control style="margin-left: 10px;">
<label id='duration'></label>
</div>`;
},

在set_value中，將日歷添加到為它們準備的容器中。

首先，為開始日期創(chuàng)建一個新的日歷對象。我們在上面解釋了這些參數(shù)的目的，所以我們不會再討論這個問題，繼續(xù)往下。

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

之后，創(chuàng)建一個新的彈出對象，并在其中添加startDate日歷。

const startDatePopup = new dhx.Popup();
startDatePopup.attach(startDateCalendar);

后續(xù)的操作算法類似于使用內(nèi)聯(lián)編輯器的場景。您需要為輸入元素指定日期值，當單擊該元素時，應(yīng)該顯示帶有日歷的彈出菜單。

const startDateInput = node.querySelector("#startDateCalendar");
startDateInput.value = startDateCalendar.getValue();

startDateInput.addEventListener("click", function () {
startDatePopup.show(startDateInput);
});

當日歷中的日期或時間發(fā)生變化時，使用updateDuration()方法更新輸入元素的日期值。

startDateCalendar.events.on("change", function () {
startDateInput.value = startDateCalendar.getValue();
updateDuration()
});

您還必須調(diào)用一個函數(shù)，該函數(shù)根據(jù)start_date和end_date輸入元素的值計算新的任務(wù)持續(xù)時間。計算出值后，更新duration元素的值。當持續(xù)時間大于1時，需要添加“s”，表示任務(wù)持續(xù)時間為幾天。

function updateDuration() {
const startDate = strToDate(startDateCalendar.getValue());
const endDate = strToDate(endDateCalendar.getValue());

const duration = gantt.calculateDuration({ start_date: startDate, end_date: endDate, task });
const durationEl = node.querySelector("#duration");
let postfix = " day";
if (duration > 1) {
postfix += "s"
}
durationEl.innerHTML = duration + postfix;
}

end_date的日歷以同樣的方式添加，只是變量名不同。

const endDateCalendar = new dhx.Calendar(null, { value: task.end_date, dateFormat: "%d %F %Y %H:%i", timePicker: true, css: "dhx_widget--bordered" });

const endDatePopup = new dhx.Popup();
endDatePopup.attach(endDateCalendar);

const endDateInput = node.querySelector("#endDateCalendar");
endDateInput.value = endDateCalendar.getValue();

endDateInput.addEventListener("click", function () {
endDatePopup.show(endDateInput);
});

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

現(xiàn)在是連接日歷的時候了。這里的一個基本條件是，第一個日歷(start_date日歷)的日期不能大于第二個日歷(end_date日歷)的日期。因此如果您必須將一個特定的任務(wù)推遲到一個較晚的日期，首先您必須更改它的結(jié)束日期。如果日歷沒有相互鏈接，則可能會為任務(wù)設(shè)置不正確的日期，并且它們不會顯示在時間軸中。

startDateCalendar.link(endDateCalendar);

當數(shù)據(jù)保存在lightbox中時調(diào)用get_value()方法，在此方法中，您根據(jù)輸入元素的值更新任務(wù)日期。

get_value: function (node, task) {
const startDateInput = node.querySelector("#startDateCalendar");
const endDateInput = node.querySelector("#endDateCalendar");
task.start_date = strToDate(startDateInput.value);
task.end_date = strToDate(endDateInput.value);
return task;
},

要成功地用DHTMLX Calendar擴展lightbox功能，您應(yīng)該知道的就是這些。

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