关于DHTMLX Scheduler能否高亮/标记小时段的技术问询

嘿，完全没问题！DHTMLX Scheduler绝对支持高亮特定小时段，你之前用的addMarkedTimespan方法其实本身就支持精确到小时、分钟的时间范围，只是需要调整参数来实现小时级的标记，而非仅局限于全天。

具体实现步骤 #

你只需要把start_date和end_date精确到小时（甚至分钟），再加上type: "dhx_time_block"参数，就能渲染出小时级的高亮块。比如要标记某员工2018年3月19日9:00到17:00的工作时长，代码可以这么写：

// 注意：DHTMLX里月份是从0开始计数的，所以3月对应数字2
scheduler.addMarkedTimespan({
  start_date: new Date(2018, 2, 19, 9, 0, 0),
  end_date: new Date(2018, 2, 19, 17, 0, 0),
  css: "work_highlight", // 自定义高亮样式的类名
  type: "dhx_time_block" // 指定为小时级时间块，而非全天标记
});

自定义高亮样式 #

接下来你可以在CSS里定义work_highlight类的样式，让高亮效果更贴合你的需求：

.work_highlight {
  background-color: #a8d1ff; /* 浅蓝色背景 */
  opacity: 0.3; /* 调整透明度，避免遮挡日程内容 */
}

标记多个小时段 #

如果需要标记多个不同的工作时段，只需要多次调用addMarkedTimespan方法即可，每个时段对应一个配置对象：

// 员工A的工作时段
scheduler.addMarkedTimespan({
  start_date: new Date(2018, 2, 19, 9, 0, 0),
  end_date: new Date(2018, 2, 19, 17, 0, 0),
  css: "emp-a-work",
  type: "dhx_time_block"
});

// 员工B的工作时段
scheduler.addMarkedTimespan({
  start_date: new Date(2018, 2, 19, 8, 30, 0),
  end_date: new Date(2018, 2, 19, 16, 30, 0),
  css: "emp-b-work",
  type: "dhx_time_block"
});

这样就能在日程表上清晰区分不同员工的工作时长范围啦～

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