如何在Kendo Scheduler中实现班次展示及跨班次事件移动功能

需求梳理 #

• 支持单日24小时灵活班次配置：可选择3个8小时班次、4个6小时班次两种模式
• 各班次在日历中以不同颜色标记，无事件时仅展示班次背景色块
• 支持事件跨班次拖拽移动，可配置是否对齐班次时间边界

实现步骤 #

1. 班次背景渲染 #

通过Scheduler的dataBound事件遍历时间段，为不同班次时段添加对应颜色的半透明背景，不会遮挡上层事件：

// 可动态调整的配置项
const shiftConfig = {
  duration: 8, // 单班次时长，单位小时，修改为6即可切换为4班次模式
  list: [
    { name: "早班", color: "#ffeb3b" },
    { name: "中班", color: "#8bc34a" },
    { name: "晚班", color: "#2196f3" }
  ]
}

// Scheduler初始化核心配置
$("#scheduler").kendoScheduler({
  date: new Date(),
  editable: true,
  views: [ "day", "week" ],
  dataBound: function() {
    const view = this.view();
    const shiftCount = 24 / shiftConfig.duration;
    // 遍历所有班次时段着色
    for(let i = 0; i < shiftCount; i++) {
      const startHour = i * shiftConfig.duration;
      // 匹配对应时段的timeslot添加背景色
      view.content.find(`[data-start$="${startHour.toString().padStart(2, '0')}:00:00"]`)
        .css("background", `${shiftConfig.list[i].color}30`);
    }
  }
})

2. 跨班次拖拽功能实现 #

默认Kendo Scheduler已原生支持跨时段拖拽，如需限制拖拽仅对齐班次边界，可添加move事件做时间校准：

$("#scheduler").kendoScheduler({
  // 继承上述基础配置
  snap: true,
  move: function(e) {
    // 校准拖拽后的起始时间为班次起始点
    const targetHour = e.start.getHours();
    const alignedHour = Math.floor(targetHour / shiftConfig.duration) * shiftConfig.duration;
    e.start.setHours(alignedHour, 0, 0, 0);
    e.end = new Date(e.start.getTime() + e.event.duration());
  }
})

效果示例 #

内容的提问来源于stack exchange，提问作者mindhunter