javascript - Kendo UI Scheduler 自定义时间标记

Question

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

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

Answer 1

我能想到实现此目的的唯一方法是使用 jQuery 将 div 元素插入到 div.k-scheduler-times 中:

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

您可以使用 css 设置其样式属性，使其与常规标记类似。可以根据调度程序的属性计算位置，然后将其应用于此 div。

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

要设置时间标记的最高值，您可以使用可以计算的百分比:

$(".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);
}

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