Dhtmlx 调度程序：时间轴视图中的自定义秒级

Question

我有几个自定义显示秒刻度，请参考片段：demo second scale

我们每天3班，每班8小时。如果我设置x_start = 0，就可以了

但是我们的工作时间从早上 6 点开始 (x_start = 6)。我希望时间表显示如下图

灰色部分是我得到的实际结果

我要怎么做才能像图中红色部分那样显示日程秒表？

非常感谢！

Answer 1

对于这种情况，仍然没有现成的 built-in 解决方案，它比 2 班次的解决方案（提供的片段）困难一点，因为第三班次发生在 2 天（22:00（前一天） ) - 05:00(次日)).

可以通过解决方法来完成，只需返回 2 个不同的模板：第 1 天（从 06:00 小时开始）和第 2 天（从 00:00 开始），新模板可能如下所示：

scheduler.templates.timeline_second_scale_date = function(date){
  var timeline = scheduler.matrix.timeline;
  var func = scheduler.date.date_to_str(
    (timeline.second_scale && timeline.second_scale.x_date)?
    timeline.second_scale.x_date:scheduler.config.hour_date
  );
  if(date.getHours() == 6)
    return `
<div class="second-scale-content">
<div class="half-second-scale">${func(date)} shift 1</div>
<div class="half-second-scale">${func(date)} shift 2</div>
</div>
`;
  if(date.getHours() == 0)
    return `
    <div class="second-scale-content">
    <div class="full-second-scale">${func(scheduler.date.add((date), -1, "day"))} shift 3</div>
    </div>
`;
};

案例是对shift 3容器（full-second-scale）使用负边距，所以它会在两天（前一天和现在）发生，CSS可能看起来如下：

  .half-second-scale{
    border: 1px solid #fff;
    width: 44.2%;
    background-color: gray;
  }
  .full-second-scale{
    border: 1px solid #fff;
    width: 133%;
    margin-left: -33%;
    display: block;
    background-color: gray;
  }

这是结果演示： http://snippet.dhtmlx.com/5/4572d021e

这只是一种解决方法，如果时间线配置不同，则需要进行更改。

亲切的问候，

Dhtmlx 调度程序：时间轴视图中的自定义秒级

Dhtmlx scheduler: custom second scale in timeline view

javascript

dhtmlx

dhtmlx-scheduler