Performance when adding large number of events in DHTMLX Scheduler

Question

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

Answer 1

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");

Answer 2

There is no built-in solution, the current version of dhtmlxScheduler works slowly on adding or loading big amounts of events to the visible area.

But if you want to add a config, you can override the method that triggers redrawing when event is added, although it would still be a bit hack. The code migth look following (put it somewhere after dhtmlxscheduler.js script):

(function(){

    var updated = scheduler.event_updated;

    //override a method that triggers event repaint
    scheduler.event_updated = function(){
        // if config is set - do nothing
        if(this.config.suppress_repaint)
            return false;

        // call original implementation otherwise
        return updated.apply(scheduler, arguments);
    };
})();

Then in your code you'll be able to use the config following way:

scheduler.config.suppress_repaint = true;

//adding events...

scheduler.config.suppress_repaint = false;
scheduler.setCurrentView();//full redraw