Progressive Event Rendering

Progressive event rendering helps keep a Calendar with many day or resource columns responsive. Events appear as the user scrolls to the corresponding part of the schedule.

Use this mode with fixed column widths when the calendar extends beyond the available screen width, for example when displaying several months of appointments or many resources side by side.

JavaScript

Set dynamicEventRendering to "Progressive" and use columnWidthSpec: "Fixed". The example below displays 90 days, with three appointments per day.

<div id="dp"></div>

<script>
  const start = new DayPilot.Date("2027-01-01");
  const events = Array.from({length: 90}, (_, day) =>
    [9, 11, 14].map(hour => ({
      id: `${day}-${hour}`,
      start: start.addDays(day).addHours(hour),
      end: start.addDays(day).addHours(hour + 1),
      text: "Appointment"
    }))
  ).flat();

  const dp = new DayPilot.Calendar("dp", {
    viewType: "Days",
    startDate: start,
    days: 90,
    columnWidthSpec: "Fixed",
    columnWidth: 140,
    dynamicEventRendering: "Progressive",
    dynamicEventRenderingMarginX: 280,
    events
  });
  dp.init();
</script>

Adjusting the scrolling behavior

You can adjust how soon events appear as the user scrolls:

• dynamicEventRenderingMarginX: extends the area where events are displayed to the left and right of the visible area, in pixels. The default is 0.
• dynamicEventRenderingMarginY: extends that area above and below the visible area, in pixels. The default is 0.
• scrollDelayEvents: the delay in milliseconds before displaying newly visible events after scrolling. The default is 10. Set it to 0 for immediate updates, or increase it to postpone updates while the user scrolls.

The example uses a horizontal margin of 280 pixels, equivalent to two additional columns on each side. Larger margins make more events available just beyond the visible area, at the cost of displaying more events at once.

Loading event data

Load the event data for the displayed date range as usual, using events.list or events.load(). Progressive rendering controls when loaded events appear; it does not request additional data from your server as the user scrolls.

Progressive event rendering is disabled by default (dynamicEventRendering: "Disabled").

Demo

• Calendar: Progressive Event Rendering

See also

• Fixed Column Width
• Event Loading