addMarkedTimespan performance issue

In my project, I want to highlight the day that a job (section) starts so that events can be added from that date.

addMarkedTimeSpan is adding adding lots of extra rendering time to the UI which is noticeable if I add/remove it.

I am loading around 100 sections at a time, each with a marked time span and 2 or 3 events.


$.each(model, function (index, job) {

   sections.push({
      key: parseInt(job.id),
      label: job.customer.name + '<br>'  + job.street + ' ' + job.city + ' ' + job.state + ' ' + job.post_code
   });

   scheduler.addMarkedTimespan({
      start_date: moment(job.start_date).toDate(),
      end_date: moment(job.start_date).add('d', 1).toDate(),
      css: 'start_date',
      sections: {
         timeline: job.id
      },
      html: 'START'
   })

   $.each(job.work_items, function (index, workItem) {

      events.push({

      // event properties

      });

   });

});

scheduler.updateCollection('jobs', sections);
scheduler.parse(events, 'json');

Hi,
please provide a complete demo, so we could check the issue.
Usually marked timespans does not create big problems when the number of elements is up to several hundreds.

It may start working slow if you refresh calendar in loop, after adding each of the timespans. Or if you have a timeline with a big number of sections (50-100 is considered big in this case) - the performance might drop noticably even without the timespans, as the timeline becomes quite slow when the number of displayed sections grows.

However, it’s hard to tell the reason without knowing your configuration, if you give a link to working demo - it would help a lot