Calculate Scheduler Height Dynamically
Environment
| Product | Progress® Kendo UI® Scheduler for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I dynamically calculate the height of the Kendo UI for jQuery Scheduler widget?
Solution
The following example demonstrates how to achieve the desired scenario.
<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 the 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>