轉(zhuǎn)帖|使用教程|編輯:吉煒煒|2025-02-12 13:56:34.857|閱讀 106 次
概述:本篇教程,您將學(xué)習(xí)如何通過拖放功能在日歷的“周”視圖中輕松添加一系列類似的事件。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
DHTMLX Scheduler 是一個全面的調(diào)度解決方案,涵蓋了與規(guī)劃事件相關(guān)的廣泛需求。假設(shè)您在我們的 Scheduler 文檔中找不到任何功能,并且希望在我們的 Scheduler 文檔中看到您的項目。在這種情況下,很可能可以使用自定義解決方案來實現(xiàn)此類功能。今年,我們將繼續(xù)探索JavaScript 調(diào)度組件的自定義功能。
今天,您將學(xué)習(xí)如何通過拖放功能在日歷的“周”視圖中輕松添加一系列類似的事件。
DHTMLX Scheduler 在 JavaScript 日歷中創(chuàng)建新事件時非常靈活。最終用戶可以計劃各種類型的事件,從基本的一次性約會到基于各種設(shè)置的重復(fù)活動。但是,如果您需要介于兩者之間的活動怎么辦?例如,如果最終用戶在一周內(nèi)有一系列類似格式的會議(或其他活動),該怎么辦?可以使用重復(fù)事件表單,但它似乎很復(fù)雜且耗時,尤其是在不需要額外條件的情況下。幸運的是,我們的 JavaScript 調(diào)度組件的廣泛 API 允許實現(xiàn)自定義解決方案,如下面的示例所示,我們將更詳細(xì)地討論。
如您所見,此解決方案使創(chuàng)建一組相同的事件變得更容易、更快捷。更具體地說,只需一次拖動操作即可在所需時間段內(nèi)為每一天創(chuàng)建事件副本。此定制不僅包括創(chuàng)建一周多天具有相同時間范圍的新事件(約會)的功能,還包括一些視覺元素,例如為事件副本呈現(xiàn)標(biāo)記的時間跨度。
從編碼角度來看,此解決方案需要使用 Scheduler API(插件、方法和事件)以及一些自定義函數(shù)(compareTime、getDatesBetween、getWeekdayNumbers和timeFixer)。這些函數(shù)用于將可用數(shù)據(jù)轉(zhuǎn)換為所需的格式。
現(xiàn)在我們可以繼續(xù)描述將此功能添加到您的項目所需的具體步驟。
您應(yīng)該從準(zhǔn)備步驟開始,其結(jié)果稍后會用到。這包括啟用視覺部分所需的插件(限制)、設(shè)置可選配置以及創(chuàng)建變量。
scheduler.plugins({
limit: true,
});
scheduler.config.time_step = 10;
scheduler.config.first_hour = 6;
scheduler.config.last_hour = 22;
let marked = null;
let start, end;
let backward;
let dates = [];
let daysToCreate = [];
在繼續(xù)之前,還應(yīng)注意,此自定義是專門為“周”視圖設(shè)計的,而其他視圖則以常規(guī)模式工作。此限制在以下條件下啟用:
if(scheduler.getState().mode == "week"){
現(xiàn)在,您應(yīng)該使用onEventDrag事件。當(dāng)在日歷的 Week 視圖中通過拖動創(chuàng)建新事件時,將調(diào)用該事件。該事件在拖動操作結(jié)束前一直有效。此事件有助于在事件拖動操作期間收集日期,并將它們添加到上一步中聲明的變量中:
scheduler.attachEvent("onEventDrag", function (id, mode, e){
...
start = scheduler.getEvent(id).start_date;
end = scheduler.getActionData(e).date;
這樣,您將獲得創(chuàng)建初始事件副本的日期。
您使用自定義getDatesBetween函數(shù)創(chuàng)建事件的副本,該函數(shù)獲取兩個日期之間的天數(shù)序列,并使用getWeekdayNumbers函數(shù)返回這些天的數(shù)字。
這些功能可以合并為一個,但我們的方法似乎更清晰:
daysToCreate = getWeekdayNumbers(getDatesBetween(start, end)); daysToCreate = daysToCreate.filter(el => el != start.getDay())
此外,您還需要使用自定義compareTime函數(shù)通過比較小時和分鐘來檢查事件創(chuàng)建的方向(時間上向前或向后):
backward = compareTime(start, end);
您將需要它來正確呈現(xiàn)事件副本的占位符。
這是本次定制功能部分的基礎(chǔ)。整個代碼塊如下:
scheduler.attachEvent("onEventDrag", function (id, mode, e){
start = scheduler.getEvent(id).start_date;
end = scheduler.getActionData(e).date;
backward = compareTime(start, end);
daysToCreate = getWeekdayNumbers(getDatesBetween(start, end));
daysToCreate = daysToCreate.filter(el => el != start.getDay())
}};
在拖動操作結(jié)束時,使用onDragEvent事件確定向前和向后創(chuàng)建事件的開始和結(jié)束日期:
scheduler.attachEvent("onDragEnd", function(id, mode, e){
if(scheduler.getState().mode == "week"){
// store dates for event copies
if(backward != -1){
start = scheduler.getActionData(e).date;
end = scheduler.getEvent(id).end_date;
} else {
start = scheduler.getEvent(id).start_date;
end = scheduler.getActionData(e).date;
}
}
});
拖拽操作完成后,可以通過燈箱添加新事件及其副本的參數(shù)。保存包含數(shù)據(jù)的燈箱時,將觸發(fā)onEventSave事件。
scheduler.attachEvent("onEventSave",function(id,ev,is_new){
onDragEnd事件中更新的getDatesBetween函數(shù)的參數(shù)(start,end)用于填充用于創(chuàng)建事件副本的日期數(shù)組。
如果最終用戶通過燈箱更改事件日期,您可以在onEventSave事件中存儲新的開始和結(jié)束參數(shù):
start = ev.start_date; end = ev.end_date;
如果日期數(shù)組包含多個日期,則可以使用addEvent()方法為每天創(chuàng)建事件的副本。
使用自定義的timeFixer函數(shù),您可以單獨控制事件副本的日期(分鐘/小時),以便它們與初始事件相匹配。
if(datesToCreate.length > 1){
datesToCreate.forEach(el => {
scheduler.addEvent({
start_date: timeFixer(el).fixedStart,
end_date: timeFixer(el).fixedEnd,
text: ev.text
})
})
之后,清除日期數(shù)組(datesToCreate):
datesToCreate = [];
應(yīng)阻止創(chuàng)建事件的默認(rèn)方式(它也將被副本替換)并且手動隱藏?zé)粝洹?/span>
// block default event creation
scheduler.hideLightbox();
return false;
}
return true;
})
現(xiàn)在,它按預(yù)期運行,但事件副本將顯示在哪里尚不完全清楚。
可以通過添加事件副本的占位符渲染來解決此問題。
由于事件副本需要在拖動過程中動態(tài)渲染,因此它們是從onEventDrag事件中獲取的。
占位符使用markedTimespan()方法呈現(xiàn)。您還需要幾個變量(zonesStartTime、zonesEndTime)。這些變量將為markedTimespan()方法存儲格式化的時間。
要獲取格式化的時間,您必須采用通用格式(小時/分鐘)獲取事件時間,然后使用自定義convertMinutesToPercentage()方法將分鐘轉(zhuǎn)換為小時的百分比。
if(backward != -1){
start = scheduler.getEvent(id).end_date;
zonesEndTime = `${scheduler.getEvent(id).end_date.getHours()}.${convertMinutesToPercentage(scheduler.getEvent(id).end_date.getMinutes())}`;
zonesStartTime = `${end.getHours()}.${convertMinutesToPercentage(end.getMinutes())}`;
} else {
zonesStartTime = `${start.getHours()}.${convertMinutesToPercentage(start.getMinutes())}`;
zonesEndTime = `${end.getHours()}.${convertMinutesToPercentage(end.getMinutes())}`;
}
現(xiàn)在,您已經(jīng)有了呈現(xiàn)占位符(daysToCreate)的天數(shù)以及所需格式(zoneStartTime和zoneEndTime)的時間。
以下是在事件創(chuàng)建期間動態(tài)呈現(xiàn)占位符的方法:
if(mode == "new-size"){
// Each time delete old placeholders
scheduler.unmarkTimespan(marked);
// And render new placeholders for creating events
if(+start < +end){
marked = scheduler.markTimespan({
html: `<div class="marked_placeholder">${scheduler.templates.event_date(start)+" - "+
scheduler.templates.event_date(end)}
</br> New Event<div>`,
days: daysToCreate,
zones:[zonesStartTime*60,zonesEndTime*60],
css: "highlighted_timespan"
});
}
if(+start > +end){
marked = scheduler.markTimespan({
html: `<div class="marked_placeholder">${scheduler.templates.event_date(end)+" - "+
scheduler.templates.event_date(start)}
</br> New Event<div>`,
days: daysToCreate,
zones:[zonesStartTime*60,zonesEndTime*60],
css: "highlighted_timespan"
});
}
}
});
最后要提的是,事件及其副本結(jié)束后,所有 markTimespan 都應(yīng)被刪除。該操作在 lightbox 關(guān)閉后立即完成。
scheduler.attachEvent("onAfterLightbox", function (){
// remove marked timespan after closing the lightbox
scheduler.unmarkTimespan(marked);
});
按照上述說明,您可以像我們的示例一樣,通過拖放操作在“周”視圖中添加一種方便的創(chuàng)建事件組的方法。
在這篇博文中,我們回顧了一個有用的自定義功能,它有助于更方便地管理事件并增強(qiáng) Web 項目中 JavaScript 調(diào)度解決方案的可用性。我們回顧了實現(xiàn)此類自定義功能的一個示例,該功能可以進(jìn)一步修改并用于特定的用例場景。DHTMLX Scheduler 豐富且文檔齊全的 API 無疑有助于滿足您的大部分調(diào)度需求,同時我們將繼續(xù)在 DHTMLX 教程中與您分享解決方案,以滿足更具體的需求。
慧都是DHTMLX在中國的官方授權(quán)代理商,提供DHTMLX系列產(chǎn)品免費試用,咨詢,正版銷售等于一體的專業(yè)化服務(wù)。
下載|體驗更多DHTMLX,請咨詢,或撥打產(chǎn)品熱線:023-68661681
加入DHTMLX技術(shù)交流QQ群(764148812),與更多小伙伴一起探討提升開發(fā)技能。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)