html5-scheduler-dynamic-loading.png

Events can be loaded from the server dynamically as the users scrolls.

Notes

  • The Scheduler fires Scroll event after every scrollbar position change.
  • The delay before the Scroll event is fired can be configured using ScrollDelayDynamic property.
  • Make sure that all events have a unique ID. Event ID is used to determine whether the event is already visible.

ASP.NET WebForms

By default, events for the full grid (defined by StartDate and Days) are loaded from the server. The scheduler may become slow when displaying a large number of events.

There is an option to load only the events for the visible range. Events will be loaded and rendered as the users scrolls.

1. Activate the dynamic event loading mode using DynamicLoading property"

DynamicLoading="true"

2. Handle Scroll event:

OnScroll="DayPilotScheduler1_Scroll"

protected void DayPilotScheduler1_Scroll(object sender, DayPilot.Web.Ui.Events.ScrollEventArgs e)
{
  setDataSourceAndBind();
  DayPilotScheduler1.Update();
}

Information about the visible range is stored in the ViewPort property:

  • ViewPort.Start - Start of the visible range (DateTime)
  • ViewPort.End - End of the visible range (DateTime)
  • ViewPort.Resources - List of IDs (Value property) of the visible resources (List<string>)

Tutorial

Demo

ASP.NET MVC

Events can be loaded dynamically (on demand) as the user scrolls.

Enable Dynamic Event Loading

DynamicEventLoading = true

Load the Events upon Request

New events are requested from the server using OnScroll event every time the scrollbar position is changed.

Details about the new viewport are available in ViewPort property.

  • ViewPort.Start
  • ViewPort.End
  • ViewPort.Resources

Example

View

@Html.DayPilotScheduler("dps_dynamic", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  DynamicLoading = true,
})

Backend Controller

protected override void OnScroll(ScrollArgs e)
{
  DateTime start = ViewPort.Start;
  DateTime end = ViewPort.End;
  List<string> resources = ViewPort.Resources;

  Events = new DataManager().GetEvents(start, end, resources);
  Update(CallBackUpdateType.EventsOnly);
}

Demo

JavaScript

Handle onScroll event to supply events for the new visible area.

See also:

Example

<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");

  dp.dynamicLoading = true;
  dp.onScroll = function(args) {
    args.async = true;
    
    var start = args.viewport.start;
    var end = args.viewport.end;
    
    $.post("backend_events.php", 
      {
        start: start.toString(),
        end: end.toString()
      },
      function(data) {
        args.events = data;
        args.loaded();
      }
    );
      
  };

  dp.init();

</script>

Tutorial

Demo