KendoUI Scheduler Custom Time Marker

Question

We are using the Kendo UI Scheduler component and we need to display a custom time marker like the one for the current time.

Is this possible and what would be the right way to do it?

Answer 1

The only way I can think of accomplishing this is inserting a div element into div.k-scheduler-times using jQuery:

$("<div class='new-time-marker'></div>").prependTo("tr:nth-child(2) .k-scheduler-times");

You can set its style attributes with css to be similar to the regular marker. The position can be calculated based on the scheduler's properties and then applied to this div.

You can add the time marker after the scheduler is loaded. For instance, if you use the method that appears in the documentation - $("#scheduler").kendoScheduler({...});, you can add the time marker right after that block.

To set the top value of the time marker, you can use percentage which you can calculate:

$(".new-time-marker").css("top", ((9*60+22)*100/(24*60)) + "%");

In this example, the marker will appear at 9:22. You can also do it this way of course:

$(".new-time-marker").css("top", ((9+22/60)*100/24) + "%");

Add styling like this one:

.new-time-marker {
    width: 0px;
    height: 0px;
    border: 6px solid transparent;
    border-left-color: blue;
    position: absolute;
    transform: translateY(-6px);
}

the transform will make sure the center of the marker is right where you pointed it.