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.

See a demo page showing 10,000 events:

• http://www.daypilot.org/demo/Scheduler/DynamicEventRendering.aspx

Viewport Size

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

• dynamicEventRenderingMarginX
• dynamicEventRenderingMarginY

Sweeping

By default, the events that were rendered stay visible. This will gradually increase the DOM size and slow down the scrolling.

It's possible to enable automatic sweeping and specify the buffer size:

• 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">
  var dp = new DayPilot.Scheduler("dp");
  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
})