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({...});，则可以在该块之后添加时间标记。

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

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

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

KendoUI Scheduler自定义时间标记

1 个答案: