How to assign the Kendo UI Scheduler workDayStart Dynamically?

Question

How to assign the Kendo UI Scheduler workDayStart Dynamically?

361 Views Asked by VIJAY At 19 July 2021 at 04:15

As of now in navigate event, we are changing the workDayStart value based on the user selection, however our requirement is the workDayStart value has to change when their is an appointment exist in the non working hours. Could some one please help me how achieve this?

Ex: The scheduler workDayStart value 8:00 am, however I have an appointment at 6:00 am. So the scheduler has to automatically adjust the workDayStart as 6:00 am and the similar way need to for workDayEnd.

Original Q&A

There are 1 best solutions below

**Shai** · Answer 1 · 2021-07-20T10:10:42.067000

You can use the setOptions method, like this:

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>

How to assign the Kendo UI Scheduler workDayStart Dynamically?

There are 1 best solutions below

Related Questions in KENDO-UI

Related Questions in KENDO-SCHEDULER

Trending Questions

Popular # Hahtags

Popular Questions