Kendo UI Template

<!DOCTYPE html>
<html>

<head>
  <link data-require="kendo" rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css" />
  <link data-require="kendo" rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css" />

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <script src="script.js"></script>
  <meta charset="utf-8" />
  <title>KendoUI Template</title>
</head>

<body>

  <div id="example">
    <div class="box wide">
      <div class="box-col">
        <label>
          <input type="checkbox" checked>Snap events to slot boundaries</label>
      </div>
    </div>
    <div id="scheduler"></div>
  </div>
  <script>
    $(function() {
      $("#scheduler").kendoScheduler({
        date: new Date("2013/6/13"),
        startTime: new Date("2013/6/13 07:00 AM"),
        height: 600,
        views: [
          "day", {
            type: "week",
            selected: true
          },
          "timeline"
        ],
        timezone: "Etc/UTC",
        dataSource: {
          batch: true,
          transport: {
            read: {
              url: "https://demos.telerik.com/kendo-ui/service/tasks",
              dataType: "jsonp"
            },
            update: {
              url: "https://demos.telerik.com/kendo-ui/service/tasks/update",
              dataType: "jsonp"
            },
            create: {
              url: "https://demos.telerik.com/kendo-ui/service/tasks/create",
              dataType: "jsonp"
            },
            destroy: {
              url: "https://demos.telerik.com/kendo-ui/service/tasks/destroy",
              dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return {
                  models: kendo.stringify(options.models)
                };
              }
            }
          },
          schema: {
            model: {
              id: "taskId",
              fields: {
                taskId: {
                  from: "TaskID",
                  type: "number"
                },
                title: {
                  from: "Title",
                  defaultValue: "No title",
                  validation: {
                    required: true
                  }
                },
                start: {
                  type: "date",
                  from: "Start"
                },
                end: {
                  type: "date",
                  from: "End"
                },
                startTimezone: {
                  from: "StartTimezone"
                },
                endTimezone: {
                  from: "EndTimezone"
                },
                description: {
                  from: "Description"
                },
                recurrenceId: {
                  from: "RecurrenceID"
                },
                recurrenceRule: {
                  from: "RecurrenceRule"
                },
                recurrenceException: {
                  from: "RecurrenceException"
                },
                isAllDay: {
                  type: "boolean",
                  from: "IsAllDay"
                }
              }
            }
          }
        }
      });

      $(":checkbox").change(function(e) {
        var scheduler = $("#scheduler").data("kendoScheduler");

        scheduler.options.snap = this.checked;
        scheduler.view(scheduler.view().name);
      });
    });
  </script>


</body>

</html>

// Code goes here

function initWindow1() {
    var windowOptions = {
        width: "500px",
        title: "EGG CHAIR",
        visible: false,
        //close: close1
    };

    $("#window").kendoWindow(windowOptions);
    $("#window").data("kendoWindow").center().open();
}

$(function() {
    $('#open').click(function() {
        initWindow1();
    });
});

/* Styles go here */

#window {display: none;}