<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/splitter/index">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title>Scheduler in Splitter</title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
    
        <div id="example">
            <div id="vertical">
                <div id="top-pane">
                  <div id="scheduler"></div>
                </div>
                <div id="middle-pane">
                    <div id="horizontal" style="height: 100%; width: 100%;">
                        <div id="left-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / left pane</h3>
                                <p>Resizable and collapsible.</p>
                            </div>
                        </div>
                        <div id="center-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / center pane</h3>
                                <p>Resizable only.</p>
                            </div>
                        </div>
                        <div id="right-pane">
                            <div class="pane-content">
                                <h3>Inner splitter / right pane</h3>
                                <p>Resizable and collapsible.</p>
                            </div>
                        </div>
                    </div>
                </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",
                          "week",
                          { type: "workWeek" },
                          "month"
                      ],
                      timezone: "Etc/UTC",
                      dataSource: {
                          batch: true,
                          transport: {
                              read: {
                                  url: "http://demos.telerik.com/kendo-ui/service/tasks",
                                  dataType: "jsonp"
                              },
                              update: {
                                  url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
                                  dataType: "jsonp"
                              },
                              create: {
                                  url: "http://demos.telerik.com/kendo-ui/service/tasks/create",
                                  dataType: "jsonp"
                              },
                              destroy: {
                                  url: "http://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" },
                                      ownerId: { from: "OwnerID", defaultValue: 1 },
                                      isAllDay: { type: "boolean", from: "IsAllDay" }
                                  }
                              }
                          }
                      }
                  }); 
              });
            </script>
          
                  <script>
                $(document).ready(function() {
                  
                     function onResize(e) {
                       splitterResize();
                		}
                  
                    $("#vertical").kendoSplitter({
                        orientation: "vertical",
                        panes: [
                            { collapsible: false },
                            { collapsible: false, size: "100px" },
                            { collapsible: false, resizable: false, size: "100px" }
                        ],resize: onResize
                    });

                    $("#horizontal").kendoSplitter({
                        panes: [
                            { collapsible: true, size: "220px" },
                            { collapsible: false },
                            { collapsible: true, size: "220px" }
                        ]
                    });
                });
            </script>
          
          <script type="text/javascript">
              $('document').ready(function () {
                  scheduler = $('#scheduler').data("kendoScheduler");
                  $("#vertical").height($(window).height() - 50);
                  $("#vertical").data("kendoSplitter").resize();
              });

              function splitterResize() {
                  var pane = $("#vertical").children(".k-pane")[0];
                  var hauteur = $(pane).height()
                  var largeur = $(pane).width()
                  $("#scheduler").data("kendoScheduler").element.height(hauteur - 5);
                  $("#scheduler").data("kendoScheduler").refresh();
              }
          </script>
            <style>
                #vertical {
                    height: 380px;
                    width: 700px;
                    margin: 0 auto;
                }

                #middle-pane { background-color: rgba(60, 70, 80, 0.10); }
                #bottom-pane { background-color: rgba(60, 70, 80, 0.15); }
                #left-pane, #center-pane, #right-pane  { background-color: rgba(60, 70, 80, 0.05); }

                .pane-content {
                    padding: 0 10px;
                }
            </style>
        </div>


</body>
</html>
