Custom day shifts, this is possible?

Scheduler
#1

Can I divide the day into four custom shifts as follows:

Monday
Shift 1: 00:00 to 10:30
Shift 2 10:30 to 13:00
Shift 3: 13:00 to 15:30
Shift 4: 15:30 to 00:00

Screenshot 2023-10-31 145717
Screenshot 2023-10-31 1457171012×315 72.1 KB

Is this possible?

#2

Hello @tlpoliveira ,

Currently, the scheduler doesn’t provide the possibility to add custom range shifts to the scale, but technically you can implement it by adding HTML elements with defined size to the timeline_scale_date template, like follows:

scheduler.templates.timeline_scale_date = function(date){
   var timeline = scheduler.matrix.timeline;
   var func = scheduler.date.date_to_str(timeline.x_date||scheduler.config.hour_date);
   return `

    <div>${func(date)}</div>
    <div class="wrapper">
        <div class="quarter">M1</div>
        <div class="quarter">M2</div>
        <div class="quarter">T1</div>
        <div class="quarter">T2</div>
   <div>
   `;
}

Here is a demo with four shifts(same size, but you can change their sizes by CSS):
https://snippet.dhtmlx.com/kr01ov07

Best regards,

#3

Ok thanks, I will try this approach.