styling scheduler

[Ali]

Hi! Is there any way to add this in schedule grid? Vertical lines for open and closed hours. 

[Hetali]

Hi Ali,

The custom vertical lines can be added in the Kendo UI Scheduler using the following custom approach:

ngAfterViewInit() {
  var td = document.querySelectorAll(".k-scheduler-table td");
  td.forEach((slot) => {
    var date = new Date(slot.attributes['ng-reflect-invariant-start'].value);

    if(date.getHours() === 4 && date.getMinutes() === 0) {
      slot['style'].borderLeft = '2px solid red';
    }
    if(date.getHours() === 12 && date.getMinutes() === 30) {
      slot['style'].borderLeft = '2px solid green';
    }
  })
}

In this StackBlitz example, I have added vertical lines in the Scheduler using the above discussed approach.

Please note that this custom approach is not officially supported by Telerik and may need further modifications.

I hope this information guides you in the right direction.

Regards,
Hetali
Progress Telerik