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

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

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

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

在上文中（點擊這里回顧>>），我們為大家介紹了“開始日期的甘特圖內聯編輯器中的日歷”這個使用場景，接下來將介紹第二個場景，一起來看看吧~

甘特圖任務Lightbox中的兩個日歷用于開始日期和結束日期

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

在lightbox中，您可以為給定任務設置開始和結束日期。因此您可以顯示兩個相互關聯的日歷，一個與開始日期綁定，另一個與結束日期綁定。

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

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

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中，將日歷添加到為它們準備的容器中。

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

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

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

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

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

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

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

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

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

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

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()
});

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

startDateCalendar.link(endDateCalendar);

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

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功能，您應該知道的就是這些。

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