CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-scheduler
Matthew Optional Meehan
Matthew Optional Meehan

Reputation: 745

How do programatically invoke navigate event for Kendo Ui Scheduler

I would like to move the placement of the toolbar controls to outside of the scheduler block. Like this

How would one go about invoking the same commands the next and previous buttons do from the toolbar but on my own custom button.

Upvotes: 2

Views: 1455

Answers (1)

Shai
Shai

Reputation: 3872

See the code snippet below.

In the code, I increase or decrease the 'date' part of the current date by 1 and then feed it back to the scheduler. It works automatically with the end or start of the month and year.

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/scheduler/events">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.timezones.min.js"></script>
    

    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
    <script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example">
  <button onclick="prev()">Previous</button>
  <button onclick="next()">Next</button>

  <div id="scheduler"></div>
</div>
<script>
  $("#scheduler").kendoScheduler({
    dataSource: [
      {
        id: 1,
        start: new Date("2013/6/6 08:00 AM"),
        end: new Date("2013/6/6 09:00 AM"),
        title: "Interview"
      }
    ]
  });
  
  function next() {
    let scheduler = $("#scheduler").data("kendoScheduler");
    let date = scheduler.date();
  	date.setDate(date.getDate() + 1);
  	scheduler.date(date);
  }
  
  function prev() {
    let scheduler = $("#scheduler").data("kendoScheduler");
    let date = scheduler.date();
  	date.setDate(date.getDate() - 1);
  	scheduler.date(date);
  }
</script>

</body>
</html>

Upvotes: 2

Related Questions