Kendo UI 调度程序自定义时间标记

Question

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

这可能吗？正确的方法是什么？

Answer 1

我能想到的唯一方法是使用 jQuery:

将 div 元素插入 div.k-scheduler-times

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

您可以使用 css 将其样式属性设置为与常规标记相似。位置可以根据scheduler的属性计算出来，然后应用到这个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);
}

变换将确保标记的中心位于您指向的位置。

Kendo UI 调度程序自定义时间标记

KendoUI Scheduler Custom Time Marker

html

javascript

kendo-ui

kendo-scheduler