如何动态分配 Kendo UI 调度程序 workDayStart？答案

【问题标题】：How to assign the Kendo UI Scheduler workDayStart Dynamically?如何动态分配 Kendo UI 调度程序 workDayStart？
【发布时间】：2021-07-19 04:15:54
【问题描述】：

到目前为止，在导航事件中，我们正在根据用户选择更改 workDayStart 值，但是我们的要求是当他们在非工作时间存在约会时，必须更改 workDayStart 值。有人可以帮助我如何实现这一目标吗？

例如：调度程序 workDayStart 的值为上午 8:00，但是我在上午 6:00 有一个约会。因此调度程序必须自动将 workDayStart 调整为上午 6:00，并且需要为 workDayEnd 调整类似的方式。

【问题讨论】：

标签： kendo-ui kendo-scheduler

【解决方案1】：

你可以使用setOptions方法，像这样：

const scheduler = $("#scheduler").data("kendoScheduler");
scheduler.setOptions({
    workDayStart: new Date("2013/1/1 5:00 AM")
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Kendo UI Snippet</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>

<body>

  <div id="scheduler"></div>
  <script>
    $("#scheduler").kendoScheduler({
  date: new Date("2013/6/6"),
  workDayStart: new Date("2013/1/1 09:00 AM"),
  views: [{type: "day", showWorkHours: true}],
  dataSource: [
    {
      id: 1,
      start: new Date("2013/6/6 08:00 AM"),
      end: new Date("2013/6/6 09:00 AM"),
      title: "Interview"
    }
  ],
  navigate: (e) => {
    console.log("navigate e", e);
    
    const scheduler = $("#scheduler").data("kendoScheduler");
    
    e.preventDefault();
    
    if (e.sender.popup && e.sender.popup.close) {
      e.sender.popup.close();
    }
    
    // Get data from server, mock using setTimeout
    setTimeout(() => { // Callback for data retrieved from the server
        scheduler.setOptions({
        workDayStart: new Date("2013/1/1 5:00 AM")
      });

      scheduler.date(e.date);
    }, 1000);
  }
});
  </script>
</body>

</html>

【讨论】：

以上更改需要刷新View，同时我想根据收到的事件更改DataBound中的workDayStart。
您是否尝试在navigation 事件处理程序中编写此代码？它不需要刷新...添加了一个演示。
在调度程序中，当我们更改视图/日期时，它将触发导航事件，并尝试获取特定日期范围内的事件。期望是 workDayStart 必须在从 Service 完成事件检索后设置，而不刷新视图。
您在导航到当天从服务器检索每天的事件？
是的，我们在导航时点击服务器以获取事件，因此导航日事件信息将在呈现数据后可用。