在構(gòu)建JavaScript調(diào)度器時通常需要為最終用戶提供一個他們喜歡的方式來計劃事件這是Web開發(fā)人員喜歡認(rèn)可DHTMLX Scheduler的重要原因它在這方面提供了完全的操作自由它帶有l(wèi)ightbox彈出窗口允許通過各種控件動態(tài)更改事件的細(xì)節(jié)。但是如果想用DHTMLX Suite庫中的小部件來補(bǔ)充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 classcustom_date_editor-wrapper div namestart_date/div div nameend_date/div /div ; }, set_value:function(node,value,ev,config){ }, get_value:function(node,ev,config){ }, focus:function(node){ } };Step 2之后必須創(chuàng)建公共變量startDateCalendar和startDateCalendarlet 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以補(bǔ)充日期選擇功能使其能夠選擇計劃事件的時間。在下面的代碼示例中我們還使用了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([namestart_date]), node.querySelector([nameend_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 }; },澄清在這里做的兩件事情是很重要的您可以修改通過參數(shù)傳遞的事件并直接為該對象分配新的日期值。對于映射到事件的幾個不同屬性的控件這是一種常見的方法。從函數(shù)返回日期選擇器值作為{start_date, end_date}對象它允許scheduler.formSection(name). getvalue()方法訪問控件值。當(dāng)實現(xiàn)映射到事件對象單個屬性的簡單控件時不需要修改事件對象只需要從方法返回值返回值將自動分配給事件對象的相應(yīng)屬性。Step 6最后需要在日歷不再需要時銷毀它們通常使用DHTMLX Scheduler的onAfterLightbox事件來完成scheduler.attachEvent(onAfterLightbox, destroyCalendars);在這個示例中您可以看到帶有嵌入式時間選擇器功能的事件日歷并使用它。