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. By 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.

With heightSpec: "Auto", the Scheduler grows to show its rows and has little opportunity to limit vertical rendering. Use a fixed or maximum height for large resource lists so the Scheduler has its own scrollable viewport.

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;

Viewport rendering reduces the number of DOM elements, but a dense viewport can still be expensive. Measure with realistic content on your target browsers and devices rather than relying on a universal DOM-element limit.

Try displaying less information:

  • Use smaller scale units
  • Use larger event height
  • Use larger cell width
  • Try to reduce custom content (HTML, active areas) that is displayed 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);
};