為了滿足 DHTMLX Scheduler 用戶的實(shí)際業(yè)務(wù)需求，本文將展示如何在 JavaScript 日程組件中實(shí)現(xiàn)“帶拖拽的任務(wù)待辦區(qū)（Backlog）”。這一功能讓用戶可以像物業(yè)管理系統(tǒng)那樣，通過簡單的拖拽操作將任務(wù)分配到時間軸上的合適位置，大幅提升排程效率與體驗(yàn)。

DHTMLX Scheduler 試用下載

本文將帶您一步步實(shí)現(xiàn)這一功能。

使用場景說明

某位 Scheduler 用戶提出：希望能像資源管理系統(tǒng)一樣，將任務(wù)從“待辦區(qū)（backlog）”拖拽到資源（員工）的日程表中，而無需手動設(shè)置日期和人員。

DHTMLX Scheduler 本身沒有內(nèi)置此功能，但憑借其強(qiáng)大的 API，開發(fā)者完全可以手動實(shí)現(xiàn)。

基于該需求，本文展示了如何在 JS 日歷中實(shí)現(xiàn)任務(wù)待辦區(qū)與拖拽排程的完整邏輯。

實(shí)現(xiàn)步驟概覽

要實(shí)現(xiàn)該功能，需要以下幾個步驟：

1. 渲染可拖拽的待辦任務(wù)卡片；

2. 在拖拽過程中高亮顯示可放置的時間槽；

3. 在任務(wù)放下時計(jì)算并插入到 Scheduler 中；

4. 支持任務(wù)“取消排程”并返回待辦區(qū)。

下面我們分步驟介紹實(shí)現(xiàn)方式。

Step 1: 初始化 Scheduler

首先，需要對 Scheduler 進(jìn)行初始化，配置視圖和插件，例如：

scheduler.plugins({
    units: true,
    timeline: true,
    tooltip: true,
    quick_info: true,
});

可通過scheduler.config.first_hour和scheduler.config.last_hour設(shè)置顯示的時間范圍（如 06:00 – 20:00，僅顯示工作時間）。

同時，需要建立一個 共享 store 對象，用于在待辦區(qū)與 Scheduler 之間同步任務(wù)數(shù)據(jù)。

Step 2: 渲染待辦任務(wù)（Backlog）

在頁面中動態(tài)生成待辦任務(wù)卡片（HTML 元素），并通過dragstart事件將任務(wù)數(shù)據(jù)綁定到拖拽動作中：

• 添加拖拽中的視覺反饋；

• 將任務(wù)數(shù)據(jù)序列化并寫入dataTransfer；

• 自定義拖拽圖像，提升用戶體驗(yàn)。

listItem.addEventListener("dragstart", (e) => {
    if (e.target.matches(".uncheduled-task-card")) {
        e.target.classList.add("dragging-task");
        const task = store.getState().tasks.find((t) => t.id == e.target.dataset.id);
        e.dataTransfer.setData("application/json", JSON.stringify(task));
        ...
    }
});

Step 3: 高亮可放置時間槽

在任務(wù)拖拽到時間槽上時，通過scheduler.markTimespan()實(shí)現(xiàn)高亮提示，幫助用戶直觀理解任務(wù)將被放置的位置和時段。

currentMarkTime = scheduler.markTimespan({
    start_date,
    end_date,
    css: "timeslot-highlight-marktime",
    sections: { unit: section, timeline: [section] },
});

當(dāng)任務(wù)拖出日程區(qū)域時，自動移除高亮效果，避免視覺殘留。

Step 4: 將任務(wù)轉(zhuǎn)化為日程事件

當(dāng)任務(wù)被放下（drop）時：

1. 清除高亮標(biāo)記；

2. 從dataTransfer中獲取任務(wù)數(shù)據(jù)；

3. 計(jì)算任務(wù)的start_date與end_date；

4. 使用store.upsertTask更新任務(wù)并寫入 Scheduler。

dropZone.addEventListener("drop", (e) => {
    e.preventDefault();
    const data = JSON.parse(e.dataTransfer.getData("application/json"));
    const { date, section } = scheduler.getActionData(e);
    const start_date = date;
    const end_date = calcEndDate(start_date, data.duration);
    store.upsertTask({ ...data, start_date, end_date, owner_id: section });
});

Step 5: 取消排程并返回待辦區(qū)

在任務(wù)編輯框（lightbox）或快速信息（quick info）中添加“取消排程”按鈕，將任務(wù)恢復(fù)到 backlog：

scheduler.config.buttons_left = ["dhx_save_btn", "dhx_cancel_btn", "unschedule_button"];
scheduler.locale.labels["unschedule_button"] = "Unschedule";

總結(jié)

通過以上步驟，您可以輕松為 DHTMLX Scheduler 擴(kuò)展一個“帶拖拽的任務(wù)待辦區(qū)”。該功能可幫助用戶更加靈活、直觀地管理任務(wù)排程，尤其適合資源分配和工單調(diào)度等場景。

關(guān)于 DHTMLX Scheduler

DHTMLX Scheduler 是一款專業(yè)的 JavaScript 日程排程控件，支持日/周/月/時間軸等多種視圖模式，具備高度可定制性，適用于排班系統(tǒng)、預(yù)約系統(tǒng)、項(xiàng)目排期、課程表等場景，完美適配 Angular、Vue、React 等主流框架。

?? 慧都科技 — DHTMLX 官方授權(quán)中國區(qū)合作伙伴

?? 了解更多 DHTMLX 產(chǎn)品詳情或申請?jiān)囉茫?

關(guān)于慧都科技：

慧都科技是一家行業(yè)數(shù)字化解決方案公司，長期專注于軟件、油氣與制造行業(yè)。公司基于深入的業(yè)務(wù)理解與管理洞察，以系統(tǒng)化的業(yè)務(wù)建模驅(qū)動技術(shù)落地，幫助企業(yè)實(shí)現(xiàn)智能化運(yùn)營與長期競爭優(yōu)勢。在軟件工程領(lǐng)域，我們提供開發(fā)控件、研發(fā)管理、代碼開發(fā)、部署運(yùn)維等軟件開發(fā)全鏈路所需的產(chǎn)品，提供正版授權(quán)采購、技術(shù)選型、個性化維保等服務(wù)，幫助客戶實(shí)現(xiàn)技術(shù)合規(guī)、降本增效與風(fēng)險可控。慧都科技DHTMLX在中國的官方授權(quán)代理商，提供DHTMLX系列產(chǎn)品免費(fèi)試用，咨詢，正版銷售等于一體的專業(yè)化服務(wù)。DHTMLX專注于JavaScript和HTML5 UI小部件和庫，以幫助開發(fā)人員更快地構(gòu)建功能豐富的、交互式的Web界面。 遵循現(xiàn)代網(wǎng)絡(luò)開發(fā)的標(biāo)準(zhǔn)和做法，DHTMLX提供針對桌面和移動設(shè)備定制的優(yōu)秀Web應(yīng)用程序框架。

下載|體驗(yàn)更多DHTMLX，請咨詢，或撥打產(chǎn)品熱線：023-68661681