timeline view - loading sections and events

I have an application where I can have anywhere up to 30 jobs (sections) per week and several workers (events) per job.

I am showing 2 weeks at a time and pulling data via ajax from a php api that returns json data.

I have put an outline of my code below but was wondering if anyone can recommend any optimisations. I have tried using updateCollection instead of addSections but couldn’t seem to get it working. I don’t know if it would be any faster.

The data looks like the following:

  • job (id, title)
    – workitem (start, end, worker, description, custom data etc…)
    – workitem
  • job
    – workitem
    – workitem
    – workitem

I have a loadData function which does the following (pseudo code):

scheduler.clearAll(); // clear events
scheduler.deleteAllSections(); // clear sections
var events = [];
loop jobs
scheduler.addSection({key: job.id, label: job.id + ': ' + job.customer_name});
loop jobs.workitems
end loop
end loop
  • create array of workitem (events)

each call of addSection causes the full repainting of calendar, so replacing 30 calls with a single updateCollection call will result in significant performance boost.

updateCollection works similar to addSection, but will accept array of objects as method’s parameter

Great. Does updateCollection only take section data? So I will need to call the parse method with event data as well?

Do I still call clearAll and deleteAllSections?

That’s right, you need to call the parse method with event data as well.
There is no need to call “deleteAllSections”, or “clearAll” before event parsing.

Thanks. It’s working and definitely seeing performance improvements.

I did have to use scheduler.clearAll(), to make sure any deleted events were removed.