Hello,
I have a scheduler that, with the right filters, can have about 450 sections (the Y axis). We are talking about a timeline view here, that shows 22 or 30 days on the X axis. Each of this users can have multiple recurring (or not) event assigned to them. I’m using data connector to get data. So my “data?timeshift=-180&uid=1497011614761&from=2017-05-31&to=2017-06-30” retrieves about 1000 events. I filter these events client side and only show the ones that have a “resource_id” that i have on sections list.
The problem is that if i have all 417 resources, with all 1000 events, the calendar takes about 30 secs to draw/load. If i resize the browser, it takes another 30 secs. if I close the console on browser, again 30 sec… During this loading time the browser completely freezes.
On, let’s say 50 resources, that have all timeslots occupied, it takes 10 sec to unfreez my browser.
Is there anything I can do to speed this process? It is a major issue to the project.
Thank you!
Hi,
can you give a link to your app, so the issue could be checked?
Overall, timeline performance degrades with number of sections, and there is no good solution except for heavily customizing the sources of timeline extension.
However, delays such as you experiencing are not usual.
I’ve put some test data in a plain timeline demo, and the repaint seems to be faster than you have:
100 sections * 200 events:
snippet.dhtmlx.com/80b3c40d5
full repaint - ~260ms screencast.com/t/UEjIBlwfqbD
450 sections * 1000 events:
snippet.dhtmlx.com/ec9fb0871
full repaint - ~1100ms screencast.com/t/hkJrQp6I4i
So i think we should find out what creates most of the delay in your app.
Is it possible that there is some external code or complex templates could affect the rendering time?
By complex templates I mean template for event bar or timeline section label, that does any complex calculations/network request/DOM manipulations, etc
Thanks for answering!
The application is heavily customized. I have labels and styles for 5 different event types, i have styles for resources types, custom tooltips, alerts on collisions, markedTimespans. Each event object has 22 properties. I have custom modal, but that has nothing to do with draw time.
So this customization might be it… And I’m sure I could have made the code better. I’m not sure I am able to provide you with code right now (it’s the end of working hours 
) and I have to talk to my manager about giving access to the application, but I will open a support ticket with relevant samples on monday.
Thanks again!
Hi again,
I think I found what causes the problem. It’s the scheduler.templates.event_class function. It works fine but on few events because of the logic I put in it. I iterate each event with each other and check something and add a class…it’s a disastah!
If i can’t figure it out i’ll post again!
Thanks for your suggestion!
Hi Alex,
I managed to fix the scheduler display. It now loads in 2-3 sec max. It was in the scheduler.templates.event_class = function (start, end, event) function. I used an example from the forum and did something like this:
[code]
var evs = scheduler.getEvents(start,end);
if (scheduler.getState().mode == “timeline”) {
for (var i = 0; i < evs.length; i++) {
//if another event in a the same section
if (evs[i].id != event.id) {
if (evs[i].resource_id == event.resource_id || evs[i].resource_id == event.proto.resource_id) {
if (event['text'] != 'iuhu' && evs[i]['text'] == 'iuhu') {
overlap = true;
break;
} else if (event['text'] == 'iuhu') {
pleiades = true;
break;
}
}
}
}
} else {
//if another event in the same time span
overlap = evs.length > 1;
}[/code]
The scheduler.getEvents was the problem. I console logged about 300 000 actions.
BUT:
Is there any known issues about dragging events on so many events and sections? it looks like this “scheduler.templates.event_class” fires 3 times on a drag for all events! 2 more times for each event if i hit cancel. I did a console.log(‘class’) on “scheduler.templates.event_class”:
I load the calendar → 2257 ‘class’
I drag an event → 2257
→ 2257
→ 2257
I hit ok → all ok
I hit Cancel → 2257
→ 2257
p.s.: I have a confirm pop-up on scheduler.attachEvent(“onBeforeEventChanged”, function (ev, e, is_new, original). So I actually immediately save the drag and if the user hits cancel i update it to previous state.
How can I see what other actions are triggered on drag?
Hi!
Is there any known issues about dragging events on so many events and sections? it looks like this “scheduler.templates.event_class” fires 3 times on a drag for all events! 2 more times for each event if i hit cancel. I did a console.log(‘class’) on “scheduler.templates.event_class”:
I’ve just made a small demo to check when event_class template is called - screencast.com/t/D7UMFESx2Cqk
- It is called once for each displayed event during full data repaint
- full data repaint on each view/date change, repaint called via scheduler.setCurrentView, after event is updated or deleted.
It doesn’t seem to happen after canceling the lightbox - so if it happens on your page - it may be called somewhere from your code.
You can trace from where the repaint is called using something following:
var render = scheduler.render_data;
scheduler.render_data = function(){
console.trace();
return render.apply(this, arguments);
}
developer.mozilla.org/en-US/doc … sole/trace
As for the numbers on your screenshot - do you have 2257 events on a screen, or number means that templates were called multiple times for the same event set during a complete repaint?
I.e. scheduler.setCurrentView() -> event_class is called x*eventCount times ?
As a quick test, you can try enabling this option docs.dhtmlx.com/scheduler/api__ … onfig.html - if your code calls scheduler repaint multiple times in a single event loop, this option should make sure only one repaint will be actually done - this may fix the performance issue. However, this config will bring asynchronousness into the code, which may have unwanted side effects.
- event_class is also called many times for an active event during drag and drop.
Drag and drop calls can be optimized by checking whether the caller event is being dragged right now - in that case you may just skip calculation, or use previously calculated value
[code]scheduler.templates.event_class = function(start, end, event){
if(scheduler.getState().drag_id == event.id){
// do some easy calculation
}else{
// do regular calculations
}
}
[/code]
Is it in any way helpful?
Hello again,
That is the number of events i have (2257). I truncated the db and added console.trace(). This is the result.
We are looking for the console.log(‘class’) that gets called 5 times (the number of events i have now).
When i drag a never before edited part of the series - event gets called 2 times
When I drag an edited part of series - event gets called 3 times
When I comment the dataProcessor part 
- event gets called 1 time
var dp = new dataProcessor("calendar/data");
dp.setTransactionMode("REST");
dp.init(scheduler);
So it seems that when i comment the data processor part in my code it behaves like in your snippet.
For I am all out of ideas at this moment, I’m thinkinig of Dropping the PHPConnector and adding custom logic to the controller (I’m already using custom insert, edit and delete for series). I’m sure this must happen because of all the custom functions and behaviors I added, but right now I’m stuck and need this tomorrow .
Thank you for your help! If you have any ideas they are more than welcome.
P.S. the scheduler.config.delay_render = 100; did not help.
Hi,
well, you can do a small hack and disable scheduler._set_event_text_style method :
scheduler._set_event_text_style = function(){};
- it adds/removes bold text when event is being saved to the backend and is responsible for an additional repaint. As a side-effect events will be no longer highlighted when during ajax save, but if needed something similar can be implemented manually
Thank you!
This one saves a lot of time. It actually behaves as expected, calling the repaint only one time after drop.
Much obliged sir!
) and I have to talk to my manager about giving access to the application, but I will open a support ticket with relevant samples on monday.
