KendoUI调度程序自定义时间标记

Question

我们使用Kendo UI调度程序组件，我们需要显示一个自定义时间标记，如当前时间标记。

这是可能的，什么是正确的方法来做到这一点？

Answer 1

我能想到的解决这个问题的唯一办法是插入div元素为div.k-scheduler-times使用jQuery：

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

您可以设置它的风格与CSS属性类似的常规标记。该位置可以根据调度程序的属性进行计算，然后应用于此div。

您可以在调度程序加载后添加时间标记。例如，如果使用文档中出现的方法 - $("#scheduler").kendoScheduler({...});，则可以在该块之后添加时间标记。

要设置时间标记的顶值，你可以用百分比，你可以计算出：

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

在这个例子中，标记将出现在9:22。你也可以这样来做，当然：

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

添加造型像这样的：

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

变换将确保标记的中心是正确的，你把它指向。