Как правильно установить максимальную высоту в Kendo Scheduler?

Загляните в ДОМ. Вы заметите, что содержимое планировщика отображается внутри <table>, отделенного от заголовка.

Технически, вы можете обернуть <div> вокруг таблицы виджета и установить его CSS-свойство height или max-height на желаемую высоту, а overflow-y на scroll или auto. Таким образом, вы могли бы достичь того, что вы хотите.

Взгляните на следующий фрагмент кода. Это должно сделать трюк:

$("#scheduler > table.k-scheduler-layout").wrap("<div style='max-height: 200px; overflow-y: auto;'></div>")

Тем не менее, я не проверял, приведет ли такое манипулирование HTML-структурой к неожиданным побочным эффектам со стороны кендо при регулярном использовании виджета.

ОБНОВЛЕНИЕ: во время процесса рендеринга при переходе к другому представлению кендо удаляет старый table, чтобы отрендерить новый - очевидно - используя ту же процедуру, что и раньше. Остается пустой <div>, который мы создали выше, и новый table, оба непосредственно под родительским узлом виджетов $("#scheduler"). Это означает, что приведенный выше код должен выполняться после привязки данных сетки. Вы можете использовать событие dataBound для этой цели. Документы: https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#events-dataBound)

Обновленный фрагмент кода, показывающий, как может выглядеть метод события:

  function scheduler_DataBound() {
    $("#scheduler > .scheduler-content-wrapper").remove();//Reset the DOM after changing page
    $("#scheduler > table.k-scheduler-layout").wrap("<div class='scheduler-content-wrapper' style='max-height: 200px; overflow-y: auto;'></div>");
    $("#scheduler .k-scheduler-content").css("overflow-x", "hidden");//Fix horizontal scrollbar
  }

ОБНОВЛЕНИЕ 2: я обнаружил, что сетка рухнет в случае, если событие dataBound будет запущено после изменения размера страницы или открытия всплывающего окна редактора. Моей первой мыслью было, что dataBound — неподходящее место для изменения размера сетки. После попытки запустить код через событие navigate, что, как мне кажется, должно быть в нужном месте, я обнаружил, что единственный способ заставить его работать — окружить код setTimeout(function(){ /* code... */ }). Хотя это работает, отложенный рендеринг в браузере выглядит ужасно. Наконец, я изменил код, чтобы установить флаг всякий раз, когда сетка должна быть изменена после dataBound. Конечно, неудобно раскидывать столько кода только для того, чтобы изменить размер виджета. Но с моей текущей точки зрения это единственное приемлемое решение, если пользовательский опыт имеет значение.

<script>
  var resizeScheduler = true;
  function scheduler_DataBound() {
    if (!resizeScheduler) {//Prevent grid crash, when event fired on page resize
      return; 
    }

    resizeScheduler = false;
    $("#scheduler > .scheduler-content-wrapper").remove();
    $("#scheduler > table.k-scheduler-layout").wrap("<div class='scheduler-content-wrapper' style='max-height: 200px; overflow-y: auto;'></div>");
    $("#scheduler .k-scheduler-content").css("overflow-x", "hidden");//Fix horizontal scrollbar
  }
  function scheduler_Navigate() {
    resizeScheduler = true;
  }
</script>

Надеюсь, это поможет.