在構(gòu)建JavaScript調(diào)度器時，通常需要為最終用戶提供一個他們喜歡的方式來計劃事件，這是Web開發(fā)人員喜歡認(rèn)可DHTMLX Scheduler的重要原因，它在這方面提供了完全的操作自由，它帶有l(wèi)ightbox彈出窗口，允許通過各種控件動態(tài)更改事件的細(xì)節(jié)。

但是如果想用DHTMLX Suite庫中的小部件來補充Scheduler的lightbox，該怎么辦呢？在本文中，我們將逐步指導(dǎo)您如何將DHTMLX Suite小部件嵌入到Scheduler組件的lightbox中。

六個步驟將DHTMLX Calendar添加到調(diào)度器的Lightbox

DHTMLX Suite庫中的任何小部件都可以無縫地集成到Scheduler組件的編輯表單中，對于所有小部件，算法幾乎是相同的。因此我們以DHTMLX Calendar為例，說明如何在實踐中做到這一點。我們將把這個功能與啟用的時間選擇器放在調(diào)度器的lightbox中，它有助于方便地以12或24小時格式指定事件的日期和持續(xù)時間。

下面是預(yù)期的結(jié)果：

Step 1

首先，有必要在scheduler.form_blocks中創(chuàng)建一個新的編輯器對象。為此必須使用返回HTML元素的render方法，在此方法中，您只需創(chuàng)建容器，并在其中生成日期選擇器。

scheduler.form_blocks["custom_date_editor"]={
render:function(config){ // config- section configuration object
return `<div class='custom_date_editor-wrapper'>
<div name="start_date"></div>
<div name="end_date"></div>
</div>
`;
},

set_value:function(node,value,ev,config){

},
get_value:function(node,ev,config){

},
focus:function(node){
}
};

Step 2

之后必須創(chuàng)建公共變量startDateCalendar和startDateCalendar：

let startDateCalendar;
let endDateCalendar;

這些變量用于訪問將放置時間選擇器的日歷對象。

Step 3

下一步是創(chuàng)建initcalendar()函數(shù)，當(dāng)您需要重新初始化日歷時，即每次打開lightbox時調(diào)用它，該函數(shù)還在創(chuàng)建新日歷之前使用析構(gòu)函數(shù)方法刪除任何舊日歷(如果它們存在)。timePicker屬性的值應(yīng)設(shè)置為true，以補充日期選擇功能，使其能夠選擇計劃事件的時間。在下面的代碼示例中，我們還使用了dhx_widget - borderdered CSS類來幫助指定日歷的邊框。

function initCalendars(startDateElement, endDateElement){
if(startDateCalendar){
destroyCalendars();
}
startDateCalendar = new dhx.Calendar(startDateElement, {
timePicker: true,
css: "dhx_widget--bordered"
});
endDateCalendar = new dhx.Calendar(endDateElement, {
timePicker: true,
css: "dhx_widget--bordered"
});
}

function destroyCalendars(){
if(startDateCalendar){
startDateCalendar.destructor();
endDateCalendar.destructor();
startDateCalendar = null;
endDateCalendar = null;
}
}

Step 4

現(xiàn)在是時候考慮lightbox控件對象中的set_value函數(shù)了，每當(dāng)控件接收到新值時，就調(diào)用此方法。當(dāng)lightbox打開時，當(dāng)控件通過API接收到一個新值時，就會發(fā)生這種情況。

這就是您必須初始化日歷并填充其值的地方：

set_value:function(node,value,ev,config){
initCalendars(node.querySelector("[name='start_date']"), node.querySelector("[name='end_date']"));

startDateCalendar.setValue(new Date(ev.start_date));
endDateCalendar.setValue(new Date(ev.end_date));
},

Step 5

為了使控件能夠在事件中保存這些值，必須從get_value函數(shù)返回這些值。

在我們的例子中，函數(shù)看起來像這樣：

get_value:function(node,ev,config){
const start_date = startDateCalendar.getValue(true);
const end_date = endDateCalendar.getValue(true);
ev.start_date = start_date;
ev.end_date = end_date;
return {
start_date,
end_date
};
},

澄清在這里做的兩件事情是很重要的：

1. 您可以修改通過參數(shù)傳遞的事件，并直接為該對象分配新的日期值。對于映射到事件的幾個不同屬性的控件，這是一種常見的方法。
2. 從函數(shù)返回日期選擇器值作為{start_date, end_date}對象，它允許scheduler.formSection(name). getvalue()方法訪問控件值。

當(dāng)實現(xiàn)映射到事件對象單個屬性的簡單控件時，不需要修改事件對象，只需要從方法返回值，返回值將自動分配給事件對象的相應(yīng)屬性。

Step 6

最后需要在日歷不再需要時銷毀它們，通常使用DHTMLX Scheduler的onAfterLightbox事件來完成：

scheduler.attachEvent("onAfterLightbox", destroyCalendars);

在這個示例中，您可以看到帶有嵌入式時間選擇器功能的事件日歷，并使用它。