Todavía no existe una solución integrada lista para este caso, y es un poco más difícil que la solución para 2 turnos (fragmento proporcionado), ya que el tercer turno ocurre durante 2 días (22:00 (día anterior) - 05:00 (siguiente día)).

Se puede hacer a través de una solución alternativa, simplemente devolviendo 2 plantillas diferentes: para el día 1 (a partir de las 06:00 horas) y para el día 2 (a partir de las 00:00), la nueva plantilla puede tener el siguiente aspecto:

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

El caso es usar el margen negativo para el contenedor shift 3 ( full-second-scale ), por lo que tendrá lugar en ambos días (anterior y actual), CSS puede verse de la siguiente manera:

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

Aquí está la demostración del resultado: http://snippet.dhtmlx.com/5/4572d021e

Es solo una solución alternativa, y requerirá cambios en caso de una configuración diferente de la línea de tiempo.

Atentamente,