Adding Custom Time Markers to Scheduler

[Mohomed]

Hi, is there any way to add custom time markers like the current time marker in schedulers by giving the dates and times as inputs ?

[Tyler]

This dojo modifies the accepted answer in this stack overflow post.

In the dataBound event, you will want to prepend the marker to your current view, otherwise you will lose it when navigating (unless you don't want it to always be there, perhaps if you only want it on a certain day? Then don't put it in the dataBound and just put it after your scheduler initialization).

In the example, I just set the top to the offsetTop of a time slot, which has limited capabilities because you are limited to whatever your slot time ranges are (You could also set it to the end of a slot). 

You will have to calculate the top value if you want it to go between time slots for random times like, say, 9:24 am instead of just 9am or 9:30am. You can't just set it by desired date and time. 

 

Change the border-left-color in the css for new-time-marker to change the markers color. As mentioned in the stack overflow post, the transform is necessary to make sure the center point is on the line you desire to set it at, otherwise the top of the arrow will be on that line.

Increase the size in the border style of the css to increase or decrease the size of the arrow, but make sure the translate is the same as the border size, but negative.

[Mohomed]

Hi, thanks for the reply. I tried the code on the Dojo, but it doesn't work. Also shouldn't I append something like a SVG line in the div or is new-time-marker a standard kendo API class that generates the marker ? Should I change anything on the databound event ?

Also, is it possible to implement custom time markers on the Gantt chart as well ? I did post on that forum, but there hasn't been a reply yet.

 

[Mohomed]

Hello Tyler, I figured the problem. On my scheduler, the HTML DOM element for the week view is 'k-scheduler-weekview' not 'k-scheduler-workWeekview', apparently the name of the DOM element for the body of the scheduler can vary. Maybe it varies depending on the Kendo UI Core versions; mine is 2017.3.913. The marker appears now. Thanks for the demo.

[Tyler]

The marker is created and styled based on the CSS for the new-time-marker. You don't need to append an SVG or anything. But, you should be able to do this exact same thing with on your Gantt chart, since this marker only relies on the CSS and where you position it. So you will just have to find a way to position it where you want on the Gantt chart. 

 

And yes, the dom element id will change based on what view you are currently in. But, you can fix that by getting the current view (scheduler.view().name) and then some if/else statements to appendTo the right thing. 

 

Also, these custom time markers will not have the built in time marker functionality of continuously moving down the page as the time changes. That functionality is in kendo javascript functions, you would have to write/copy whatever they are doing into your javascript for your custom markers to do that, otherwise these markers will just be set on each load.

 

Actually, you could just have a timing function that updates the new-time-marker top value based on current time every couple minutes or so.

[Mohomed]

Thank You, Tyler, I'll try it with the Gantt. But many of the DOM elements of the Gantt are not given unique class names like the scheduler, so it's not going to be easy. Also, another issue is that on the Gantt the marker has to appear vertically oriented and not horizontally like on the scheduler.

[Joana]

Hello all,

I am glad that you have managed to render custom time markers for the Scheduler widget. Regarding the Gantt widget let's carry on the discussion in the following forum thread: 

https://www.telerik.com/forums/custom-time-markers-for-gantt-charts

Regards,
Joana
Progress Telerik