This is a migrated thread and some comments may be shown as answers.

Adding Custom Time Markers to Scheduler

6 Answers 524 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Mohomed
Top achievements
Rank 1
Mohomed asked on 13 Oct 2017, 09:03 AM
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 ?

6 Answers, 1 is accepted

Sort by
0
Tyler
Top achievements
Rank 1
answered on 13 Oct 2017, 03:50 PM

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.

0
Mohomed
Top achievements
Rank 1
answered on 16 Oct 2017, 08:10 AM

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.

 

0
Mohomed
Top achievements
Rank 1
answered on 16 Oct 2017, 10:19 AM
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.
0
Tyler
Top achievements
Rank 1
answered on 16 Oct 2017, 01:49 PM

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.

0
Mohomed
Top achievements
Rank 1
answered on 17 Oct 2017, 02:53 AM
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.
0
Joana
Telerik team
answered on 17 Oct 2017, 07:25 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Scheduler
Asked by
Mohomed
Top achievements
Rank 1
Answers by
Tyler
Top achievements
Rank 1
Mohomed
Top achievements
Rank 1
Joana
Telerik team
Share this question
or