Dhtmlx scheduler: custom second scale in timeline view

Question

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

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!

Siarhei · Accepted Answer · 2022-05-19T14:56:57.903

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,

Siarhei, I have one more question about calculating the ratio of `half-second-scale` and `full-second-scale` . How can you calculate them? Is there any formula for this calculation when changing `x_start`? — Tommy1209, May 20 '22 at 04:19
Hello, Unfortunately, there is no specific formula, and these styles(and even the structure of "divs") was calculated manually. So if you need templates for different timeline configs - you should manually create templates for each case, and return different ones for different configs, like follows: `scheduler.templates.timeline_second_scale_date = function(date){ // some config condition if(timelineCondition1){ // return some template } if(timelineCon2){ // return different template } if(timelineCon3){ // return different template } }; ` — Siarhei, May 20 '22 at 15:52

Dhtmlx scheduler: custom second scale in timeline view

1 Answers1