Poor calendar performance

[marciogurka]

Forum post

"Hi, I am able to produce the performance issues, on megadataset
https://bryntum.com/products/calendar/examples/megadataset/
example having only 1500 events per month.
On events drag & drop or going next & previous in the calendar control taking cpu to 100% for some time causing the lag. In our app when ngrx/store data updated or calendar date range change we are getting tasks data from ngrx/store and binding with calendar to refresh. This leads to app crashes.
If you will increase the events count from 1500 to 2000 you will be easily able to see the issues.

Here is the demo video:
https://video.projul.com/watch/DmZ9JgQMaJFTFPP3wPiYsa
"

const
    today       = new Date(),
    currentYear = today.getFullYear(),
    eventColors = [
        '#D50000', '#E67C73', '#F4511E', '#F6BF26',
        '#33B679', '#0B8043', '#039BE5', '#3F51B5',
        '#7986CB', '#8E24AA', '#616161'],
    eventNames  = [
        'Quarterly Board Meeting',
        'Development Meeting',
        'Sales Dept Meeting',
        'Interview with Julia',
        'Interview with Naomi'],
    events      = new Array(2000);

// Create 100,000 events
for (let i = 0; i < 2000; i++) {
    const
        year          = 2023,
        month         = 5,
        day           = Math.round(Math.random() * 31),
        hour          = Math.round(Math.random() * 8) + 4,
        durationHours = Math.round(Math.random() * 71) + 1;

events[i] = {
    name       : eventNames[Math.round(Math.random() * 4)],
    startDate  : new Date(year, month, day, hour),
    endDate    : new Date(year, month, day, hour + durationHours),
    eventColor : eventColors[Math.round(Math.random() * 10)],
    resourceId : Math.round(Math.random() * 4)
};
}

const calendar = new Calendar({
    appendTo : 'container',

// Start life looking at this date
date : new Date(),

modes : {
    list : true,
    month:{
 allowOverlap: false,
      autoRowHeight: true,
      minRowHeight: 100,

   }
},

mode : 'month',

eventStore : {
    useRawData : true,
    data       : events
}
});