為了滿足 DHTMLX Scheduler 用户的實際業務需求，本文將展示如何在 JavaScript 日程組件中實現“帶拖拽的任務待辦區（Backlog）”。這一功能讓用户可以像物業管理系統那樣，通過簡單的拖拽操作將任務分配到時間軸上的合適位置，大幅提升排程效率與體驗。
DHTMLX Scheduler 試用下載，請聯繫DHTMLX官方授權代理商慧都科技
本文將帶您一步步實現這一功能。
使用場景説明
某位 Scheduler 用户提出：希望能像資源管理系統一樣，將任務從“待辦區（backlog）”拖拽到資源（員工）的日程表中，而無需手動設置日期和人員。
DHTMLX Scheduler 本身沒有內置此功能，但憑藉其強大的 API，開發者完全可以手動實現。
基於該需求，本文展示瞭如何在 JS 日曆中實現任務待辦區與拖拽排程的完整邏輯。
DHTMLX Scheduler 試用下載，請聯繫DHTMLX官方授權代理商慧都科技
實現步驟概覽
要實現該功能，需要以下幾個步驟：
-
渲染可拖拽的待辦任務卡片；
-
在拖拽過程中高亮顯示可放置的時間槽；
-
在任務放下時計算並插入到 Scheduler 中；
-
支持任務“取消排程”並返回待辦區。
下面我們分步驟介紹實現方式。
Step 1: 初始化 Scheduler
首先，需要對 Scheduler 進行初始化，配置視圖和插件，例如：
scheduler.plugins({
units: true,
timeline: true,
tooltip: true,
quick_info: true,
});
可通過scheduler.config.first_hour和scheduler.config.last_hour設置顯示的時間範圍（如 06:00 – 20:00，僅顯示工作時間）。
同時，需要建立一個 共享 store 對象，用於在待辦區與 Scheduler 之間同步任務數據。
Step 2: 渲染待辦任務（Backlog）
在頁面中動態生成待辦任務卡片（HTML 元素），並通過dragstart事件將任務數據綁定到拖拽動作中：
-
添加拖拽中的視覺反饋；
-
將任務數據序列化並寫入dataTransfer；
-
自定義拖拽圖像，提升用户體驗。
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: 高亮可放置時間槽
在任務拖拽到時間槽上時，通過scheduler.markTimespan()實現高亮提示，幫助用户直觀理解任務將被放置的位置和時段。
currentMarkTime = scheduler.markTimespan({
start_date,
end_date,
css: "timeslot-highlight-marktime",
sections: { unit: section, timeline: [section] },
});當任務拖出日程區域時，自動移除高亮效果，避免視覺殘留。
Step 4: 將任務轉化為日程事件
當任務被放下（drop）時：
-
清除高亮標記；
-
從dataTransfer中獲取任務數據；
-
計算任務的start_date與end_date；
-
使用store.upsertTask更新任務並寫入 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: 取消排程並返回待辦區
在任務編輯框（lightbox）或快速信息（quick info）中添加“取消排程”按鈕，將任務恢復到 backlog：
scheduler.config.buttons_left = ["dhx_save_btn", "dhx_cancel_btn", "unschedule_button"];
scheduler.locale.labels["unschedule_button"] = "Unschedule";總結
通過以上步驟，您可以輕鬆為 DHTMLX Scheduler 擴展一個“帶拖拽的任務待辦區”。該功能可幫助用户更加靈活、直觀地管理任務排程，尤其適合資源分配和工單調度等場景。
關於 DHTMLX Scheduler
DHTMLX Scheduler 是一款專業的 JavaScript 日程排程控件，支持日/周/月/時間軸等多種視圖模式，具備高度可定製性，適用於排班系統、預約系統、項目排期、課程表等場景，完美適配 Angular、Vue、React 等主流框架。
DHTMLX Scheduler 試用下載，請聯繫DHTMLX官方授權代理商慧都科技
