想自己做點飄紗素材到網(wǎng)站上買鄭州seo服務(wù)技術(shù)
DHTMLX Suite?UI 組件庫允許您更快地構(gòu)建跨平臺、跨瀏覽器 Web 和移動應(yīng)用程序。它包括一組豐富的即用式 HTML5 組件,這些組件可以輕松組合到單個應(yīng)用程序界面中。
DHTMLX Gantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表,可滿足項目管理應(yīng)用程序的所有需求,是完善的甘特圖圖表庫。
DHTMLX Gantt 8.0正式版下載
在項目管理中,合理利用時間起著至關(guān)重要的作用。當(dāng)在甘特圖中處理大量任務(wù)時,有必要騰出時間來指定它們的持續(xù)時間。因此,用日歷功能來補充它是一個好主意,這樣可以更方便地進行時間管理,您可以依賴經(jīng)過時間驗證的DHTMLX Calendar,替代使用某些第三方工具。
在這篇博文中,您將學(xué)習(xí)使用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é)束日期綁定。
標(biāo)準(zhǔn)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;">
–
<input type="text" id="endDateCalendar" readonly data-widget-control style="margin-left: 10px;">
<label id='duration'></label>
</div>`;
},
在set_value中,將日歷添加到為它們準(zhǔn)備的容器中。
首先,為開始日期創(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)編輯器的場景。您需要為輸入元素指定日期值,當(dāng)單擊該元素時,應(yīng)該顯示帶有日歷的彈出菜單。
const startDateInput = node.querySelector("#startDateCalendar");
startDateInput.value = startDateCalendar.getValue();startDateInput.addEventListener("click", function () {
startDatePopup.show(startDateInput);
});
當(dāng)日歷中的日期或時間發(fā)生變化時,使用updateDuration()方法更新輸入元素的日期值。
startDateCalendar.events.on("change", function () {
startDateInput.value = startDateCalendar.getValue();
updateDuration()
});
您還必須調(diào)用一個函數(shù),該函數(shù)根據(jù)start_date和end_date輸入元素的值計算新的任務(wù)持續(xù)時間。計算出值后,更新duration元素的值。當(dāng)持續(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);
當(dāng)數(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ù)講~