Calculate Scheduler Height Dynamically

The following example demonstrates how to dynamically calculate the height of the Kendo UI Scheduler widget.

Example

<div id="scheduler"></div>
<script type="text/javascript">
$(function() {
    $("#scheduler").kendoScheduler({
        height: 100,
        views: [
            {type: "day"},
            {type: "week", selected: true}
        ],
        timezone: "Etc/UTC",
        date: kendo.date.today(),
        dataSource: [],
        editable: false
    });

    function fitWidget() {
      var widget = $("#scheduler").data("kendoScheduler");
      var height = $(window).outerHeight();

      //size widget to take the whole view
      widget.element.height(height);
      widget.resize(true);
    }

    $(window).resize(function() {
      clearTimeout(window._resizeId);

      window._resizeId = setTimeout(function() {
        console.log("resize");
        fitWidget();
      }, 500);
    });

    fitWidget();
  });
</script>

See Also

Other articles and how-to examples on the Kendo UI Scheduler:

• Scheduler JavaScript API Reference
• How to Add Controls to Custom Editor
• How to Add Events Programmatically
• How to Calculate Scheduler Height Dynamically on Mobile
• How to Create Custom Views Inheriting Built-In Views
• How to Hide Edit Buttons
• How to Nest Editors inside Event Templates
• How to Use Custom Event Template with Specific Background Color

How-to examples on the Kendo UI Scheduler in AngularJS:

• How to Create and Set ObservableArray Events
• How to Edit Using ContextMenu

For more runnable examples on the Kendo UI Scheduler, browse its How To documentation folder.