Progressive Event Rendering

With progressive event rendering enabled, the Scheduler events are not rendered at once but progressively as a user scrolls. This mode assumes all events are already available on the client side (compare with dynamic event loading).

The progressive rendering is enabled by default. You can turn it off using dynamicEventRendering property.

In both the progressive and static modes the events are rendered in batches to provide visual feedback and prevent browser freezing.

Demo

See a live demo where you can test the behavior and different configuration options:

• JavaScript Scheduler: Progressive Event Rendering Demo

Synchronous and Asynchronous Rendering with Debouncing

The scrollDelayEvents property sets whether the event rendering will be synchronous (fast but requires a fast machine) or asynchronous with a debounce delay (good for smooth scrolling but introduces a visible delay). See also scrolling performance.

Viewport Size

The dynamicEventRenderingMargin property determines how many pixels will be loaded in addition to the current viewport in each direction. You can specify different margin for horizontal (X) and vertical (Y) axis:

• dynamicEventRenderingMarginX

• dynamicEventRenderingMarginY

Sweeping

By default, the events that move our of the viewport are removed (automatic sweeping is enabled). Only a specified buffer of events stay visible.

Keeping all rendered events visible gradually increases the DOM size and slow down the scrolling.

• dynamicEventRenderingCacheSize

• dynamicEventRenderingCacheSweeping

Dynamic Loading

The progressive event rendering improves performance but it's necessary to preload the events. That will only work well up to a certain threshold. On fast machines, the Scheduler can display 100,000s of events (see the Angular Scheduler demo that displays 400,000 events). However, these events need to be loaded from the server at once and the data set size can be quite big (400,000 events take about 46 MB uncompressed).

For larger data sets (> 1000 events), you may want to switch to dynamic event loading which allows reading the data from the server in smaller chunks during scrolling.

See Also

• Scrolling Performance

JavaScript

<div id="dp"></div>
<script type="text/javascript">
  const dp = new DayPilot.Scheduler("dp", {
    dynamicEventRendering: "Disabled",
    // ...
  });
  dp.init();
</script>

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  DynamicEventRendering = "Disabled"
/>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  DynamicEventRendering = DynamicEventRenderingType.Disabled
})