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

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

DHTMLX Scheduler 最新版下載

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

DHTMLX Scheduler 在 JavaScript 日歷中創建新事件時非常靈活。最終用戶可以計劃各種類型的事件，從基本的一次性約會到基于各種設置的重復活動。但是，如果您需要介于兩者之間的活動怎么辦？例如，如果最終用戶在一周內有一系列類似格式的會議（或其他活動），該怎么辦？可以使用重復事件表單，但它似乎很復雜且耗時，尤其是在不需要額外條件的情況下。幸運的是，我們的 JavaScript 調度組件的廣泛 API 允許實現自定義解決方案，如下面的示例所示，我們將更詳細地討論。

如您所見，此解決方案使創建一組相同的事件變得更容易、更快捷。更具體地說，只需一次拖動操作即可在所需時間段內為每一天創建事件副本。此定制不僅包括創建一周多天具有相同時間范圍的新事件（約會）的功能，還包括一些視覺元素，例如為事件副本呈現標記的時間跨度。

從編碼角度來看，此解決方案需要使用 Scheduler API（插件、方法和事件）以及一些自定義函數（compareTime、getDatesBetween、getWeekdayNumbers和timeFixer）。這些函數用于將可用數據轉換為所需的格式。

現在我們可以繼續描述將此功能添加到您的項目所需的具體步驟。

準備步驟

您應該從準備步驟開始，其結果稍后會用到。這包括啟用視覺部分所需的插件（限制）、設置可選配置以及創建變量。

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 = [];

在繼續之前，還應注意，此自定義是專門為“周”視圖設計的，而其他視圖則以常規模式工作。此限制在以下條件下啟用：

if(scheduler.getState().mode == "week"){

步驟 1

現在，您應該使用onEventDrag事件。當在日歷的 Week 視圖中通過拖動創建新事件時，將調用該事件。該事件在拖動操作結束前一直有效。此事件有助于在事件拖動操作期間收集日期，并將它們添加到上一步中聲明的變量中：

scheduler.attachEvent("onEventDrag", function (id, mode, e){
    ...
    start = scheduler.getEvent(id).start_date;
    end = scheduler.getActionData(e).date;

這樣，您將獲得創建初始事件副本的日期。

第 2 步

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

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

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

步驟3

此外，您還需要使用自定義compareTime函數通過比較小時和分鐘來檢查事件創建的方向（時間上向前或向后）：

backward = compareTime(start, end);

您將需要它來正確呈現事件副本的占位符。

這是本次定制功能部分的基礎。整個代碼塊如下：

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())

}};

在拖動操作結束時，使用onDragEvent事件確定向前和向后創建事件的開始和結束日期：

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

拖拽操作完成后，可以通過燈箱添加新事件及其副本的參數。保存包含數據的燈箱時，將觸發onEventSave事件。

scheduler.attachEvent("onEventSave",function(id,ev,is_new){

onDragEnd事件中更新的getDatesBetween函數的參數（start，end）用于填充用于創建事件副本的日期數組。

如果最終用戶通過燈箱更改事件日期，您可以在onEventSave事件中存儲新的開始和結束參數：

start = ev.start_date;
end = ev.end_date;

如果日期數組包含多個日期，則可以使用addEvent()方法為每天創建事件的副本。

使用自定義的timeFixer函數，您可以單獨控制事件副本的日期（分鐘/小時），以便它們與初始事件相匹配。

if(datesToCreate.length > 1){
        datesToCreate.forEach(el => {
        scheduler.addEvent({
             start_date: timeFixer(el).fixedStart,
             end_date: timeFixer(el).fixedEnd,
             text: ev.text
        })
})

之后，清除日期數組（datesToCreate）：

datesToCreate = [];

應阻止創建事件的默認方式（它也將被副本替換）并且手動隱藏燈箱。

// block default event creation
        scheduler.hideLightbox();
        return false;
    }
    return true;
})

現在，它按預期運行，但事件副本將顯示在哪里尚不完全清楚。

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

第 6 步

由于事件副本需要在拖動過程中動態渲染，因此它們是從onEventDrag事件中獲取的。

占位符使用markedTimespan()方法呈現。您還需要幾個變量（zonesStartTime、zonesEndTime）。這些變量將為markedTimespan()方法存儲格式化的時間。

要獲取格式化的時間，您必須采用通用格式（小時/分鐘）獲取事件時間，然后使用自定義convertMinutesToPercentage()方法將分鐘轉換為小時的百分比。

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())}`;
}

現在，您已經有了呈現占位符（daysToCreate）的天數以及所需格式（zoneStartTime和zoneEndTime）的時間。

以下是在事件創建期間動態呈現占位符的方法：

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"
        });
    }
    }
});

最后要提的是，事件及其副本結束后，所有 markTimespan 都應被刪除。該操作在 lightbox 關閉后立即完成。

scheduler.attachEvent("onAfterLightbox", function (){
    // remove marked timespan after closing the lightbox
    scheduler.unmarkTimespan(marked);  
});

按照上述說明，您可以像我們的示例一樣，通過拖放操作在“周”視圖中添加一種方便的創建事件組的方法。

總結

在這篇博文中，我們回顧了一個有用的自定義功能，它有助于更方便地管理事件并增強 Web 項目中 JavaScript 調度解決方案的可用性。我們回顧了實現此類自定義功能的一個示例，該功能可以進一步修改并用于特定的用例場景。DHTMLX Scheduler 豐富且文檔齊全的 API 無疑有助于滿足您的大部分調度需求，同時我們將繼續在 DHTMLX 教程中與您分享解決方案，以滿足更具體的需求。

慧都是DHTMLX在中國的官方授權代理商，提供DHTMLX系列產品免費試用，咨詢，正版銷售等于一體的專業化服務。

下載|體驗更多DHTMLX，請咨詢，或撥打產品熱線：023-68661681