Search code examples
javascriptdhtmlxdhtmlx-scheduler

Dhtmlx scheduler: custom second scale in timeline view

I have a few customize to display second scale, please refer to snippet: demo second scale

We have 3 shifts per day, each shift is 8 hours. If I set x_start = 0, it's ok

But our working time start from 6 AM (x_start = 6). And I want the schedule to show up like the picture bellow

enter image description here

The gray part is the actual result I got

What do I have to do so that the schedule second-scale can be displayed like the red part in the picture?

Thanks a lot!

Solution

  • There is still no ready built-in solution for this case, and it's little more difficult than solution for 2 shifts(provided snippet), as the third shift occurs during 2 days(22:00(prev day) - 05:00(next day)).

    It can be done through workaround, just by returning 2 different templates: for the day1(start from 06:00 hours) and for the day 2(from 00:00), the new template may look like follows:

    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>
`;
};

    The case is to use the negative margin for the shift 3 container(full-second-scale), so it will take place in both days(prev and current), CSS may look like follows:

      .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;
  }

    Here is the result demo: http://snippet.dhtmlx.com/5/4572d021e

    It's just a workaround, and it will require changes in case of different config of the timeline.

    Kind regards,