1. Excessive calculations in onBeforeCellRender

The onBeforeCellRender event handler is called once for every cell during rendering. This happens during the initial load, during updates and during scrolling.

You need to make the event handler as efficient as possible. Avoid any expensive calculations.

If you need to make calculations try moving it to a special function and cache the results; use the onBeforeCellRender only to get the cached results.

2. Viewport set incorrectly

The Scheduler includes many rendering optimizations. Bu default, it only renders elements that are in the Scheduler viewport (progressive event rendering, progressive row rendering). Additional elements are rendered during scrolling.

Please note the Scheduler only optimizes its own viewport, not the browser viewport.

If you use heightSpec: "Max" with a large number of rows the Scheduler will have to render all of them and will not be able to apply optimizations.

3. Too many DOM elements

Trying to display too much information in a single viewport may lead to a large number of DOM elements to be displayed. Browsers are only able to handle a certain number of elements on a page.

You can check the number of DOM elements that the Scheduler displays:

var elements = dp.nav.top.getElementsByTagName("*").length;

The Scheduler optimizes the number of DOM elements by rendering only the current viewport. However, if there are too many elements in the current viewport you may hit the browser limits. Usually browsers start having problems when displaying between 5,000 - 10,000 DOM elements.

Try displaying less information:

  • Use smaller scale units
  • Use larger event height
  • User larger cell width
  • Try to reduce custom content (HTML, active areas) that is dipslayed in events and cells

4. Too short debouncing delays

During scrolling, it's necessary to make a compromise between speed scrolling and real-time event rendering. Rendering too many elements in real time will prevent smooth scrolling.

Read more: Scrolling Performance

5. UI Updates in onScroll

The onScroll event is only intended for loading the event data dynamically. Do not perform any additional UI updates there (on Scheduler or other elements). 

If you need to hook UI changes, debounce the action to make sure it's only fired when the scrolling is finished:

var debounceTimeout = null;
var debounceDelay = 1000;  // in milliseconds, start with a high value and test lower and lower values until it affects performance

dp.onScroll = function() {

  // ...

  clearTimeout(debounceTimeout);
  debounceTimeout = setTimeout(function() {
    // make your UI changes
  }, debounceDelay);
};