javascriptdhtmlx-scheduler

Performance when adding large number of events in DHTMLX Scheduler


We have discovered an odd issue in DHTMLX Scheduler when adding a very large number of events (several hundred). Imagine the events are all in the date range of Jan-Mar. If the user is currently viewing that date range, then the code that adds the events takes about 15 seconds to run. However, if the user is viewing, say, Mar-May, then the same section of code runs instantly. Not only that, but after the code has run instantly, you can immediately scroll to the Jan-Mar range and see all 200 events; they render is less than a second.

We are thinking the problem must be something like a full repaint being done by Scheduler after each event is added. For now, we have added the workaround that we change the date of the user's view to something in the far distant future, add all the events, and then change their date back to what they had. However, this seems like a hack and we would rather have an option like "scheduler.config.suppress_repaint" that we can set to "true" while adding the events.

Does anything like this exist? We have not been able to find any mention of such a thing in the Scheduler documentation. Any help much appreciated.


EDIT: Per comments below, this issue was resolved by posting on the official DHTMLX forum, resulting in a patch solving it that was subsequently incorporated into the next official release. See that discussion here: https://forum.dhtmlx.com/t/performance-when-adding-large-number-of-events-via-backbone/30367


Solution

  • To add a lot events at once, you can use scheduler.parse instead of scheduler.addEvent

    This code will repaint scheduler after adding each event

    //slow
    for (var i=1; i<100; i++)
        scheduler.addEvent({ id:i });
    

    This one will repaint scheduler only once

    //fast
    var data = [];
    for (var i=1; i<100; i++)
        data.push({ id:i });
    scheduler.parse(data, "json");