DHTMLX Scheduler 是一個全面的調(diào)度解決方案，涵蓋了與規(guī)劃事件相關(guān)的廣泛需求。假設(shè)您在我們的 Scheduler 文檔中找不到任何功能，并且希望在我們的 Scheduler 文檔中看到您的項目。在這種情況下，很可能可以使用自定義解決方案來實現(xiàn)此類功能。今年，我們將繼續(xù)探索JavaScript 調(diào)度組件的自定義功能。

今天，您將學(xué)習(xí)如何通過拖放功能在日歷的“周”視圖中輕松添加一系列類似的事件。

DHTMLX Scheduler 最新版下載

通過用戶界面安排一組活動的新方法

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ù)描述將此功能添加到您的項目所需的具體步驟。

準(zhǔn)備步驟

您應(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"){

步驟 1

現(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)建初始事件副本的日期。

第 2 步

您使用自定義getDatesBetween函數(shù)創(chuàng)建事件的副本，該函數(shù)獲取兩個日期之間的天數(shù)序列，并使用getWeekdayNumbers函數(shù)返回這些天的數(shù)字。

這些功能可以合并為一個，但我們的方法似乎更清晰：

daysToCreate = getWeekdayNumbers(getDatesBetween(start, end));
daysToCreate = daysToCreate.filter(el => el != start.getDay())

步驟3

此外，您還需要使用自定義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;
        }
    }

});

步驟5

拖拽操作完成后，可以通過燈箱添加新事件及其副本的參數(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ù)期運行，但事件副本將顯示在哪里尚不完全清楚。

可以通過添加事件副本的占位符渲染來解決此問題。

第 6 步

由于事件副本需要在拖動過程中動態(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)建事件組的方法。

總結(jié)

在這篇博文中，我們回顧了一個有用的自定義功能，它有助于更方便地管理事件并增強(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