Performance Issues

[FizzBuzz791]

Rendering a "large" number of events (see screenshot) seems to slow things down to the point where there's noticeable lag and even "A webpage is slowing down your browser" at the Quarter and Year levels.

I haven't looked too far into it yet, but I'm fairly sure it's not an issue with my code. Figured I'd raise it here and we can discuss further and/or look into it if required.

I'm using repeating events if that's of any relevance.

[Saikat-Sinha]

+1 I am facing the same issue when the number of events goes past 70-80 events

[hanchiang]

I just started using this library because it has great layout and functionalities out of the box.

I think that the performance issue should be due to the fact that it mutates schedulerData for every action, and causes a re-render of the whole scheduler component.

Any suggestions for making the state management more 'react style'?

[FizzBuzz791]

A fairly quick/dirty hack might be to just pass in the "relevant" events in the prevClick, nextClick, onSelectDate and onViewChange functions/callbacks. RBS looks through the entire event list to find what is actually relevant to render. In my situation, it's a year's worth of repeating events that's being passed, filtered, etc. every single time. For most situations, it doesn't need all that data.

That said though, I haven't tried it and it does seem like a dirty hack...

@StephenChou1017 - Any ideas or is this going to be something quite involved to fix up?

[StephenChou1017]

I've tried to optimize the performance issue in 0.2.7, but I don't think it's enough.

[desilvaNSP]

@StephenChou1017 Can we optimize _createRenderData() function for improve performance. I think this method is calling every time change on the scheduler.

[FizzBuzz791]

@StephenChou1017 - I think it's a bit better on 0.2.7, it's still taking 6 - 7 seconds of unresponsiveness to switch to Month view though (if it's that slow for Month, it's not worth trying Quarter or Year).

[StephenChou1017]

@FizzBuzz791 Hi, can you send your testing data(resources and events) to me and I can try it myself?:-) My email: 27788280@qq.com

[madzadev]

yup, 1k events took me around minute to load... did you guys @FizzBuzz791 @hanchiang @desilvaNSP found any workaround to this?

[hphpwj]

50+ events is loaded over 5+ seconds in my browser, about 20 resources, Help! Is it refer to the quantity of resource?

[hanchiang]

Sadly, no. I was using this library for writing a quick demo at work. Now that the focus of my work has shifted and have been real busy ever since.

[hphpwj]

I found the moment took a lot of time, with using of chrome performance devtools.

[hphpwj]

Most of the time is wasted on time format conversion.

[jeffreybos]

@hphpwj do you have a solution to reduce the loading time?

[hphpwj]

@jeffreybos change localeMoment(time) to localeMoment(new Date(time)) can effectively reduce the loading time in the file SchedulerData.js. But the function Date() is time zone related, you can't replace all the localeMoment() to avoid unexpected mistakes.

[desilvaNSP]

@StephenChou1017, @FizzBuzz791 Do we have solution to optimize for rendering large number of events on scheduler.?

[manojkumaraut]

The response is too slow for rendering large number of events on scheduler.. any solution or suggestion pls Thanks and appreciate your help

[ali-ehsan]

Any update on this?

[madzadev]

I always come back to see if it's improved, guess not yet 😉

[mohaimenmahi]

I always come back to see if it's improved, guess not yet

same here :/

[jannat412]

I always come back to see if it's improved, guess not yet

Me too.

[Arturo-dot]

Are there any news?

[matteomessmer]

Hi, has anyone found a solution to the performance issues?

[brunopapait]

Any performance-related solutions ?

[matteomessmer]

Hi. I started using Syncfusion Scheduler (it has a community license)

[madzadev]

@matteomessmer does it have a year-in-days view?

[matteomessmer]

@madzadev yes, it has also good support and documentation

[madzadev]

@matteomessmer thanks a lot! 👍😉

[hbatalhaStch]

https://github.com/hbatalhaStch/react-big-scheduler

I have improved its performance a lot compared to how it was but there's still a lot of room for improvement and I am welcoming all the help I can get. There are a few bugs I need to fix as well

Changes (for now)

• Reduce loading time on view change
• Update antd (v5.1.6)
• Update react(v18.2.0)
• Update react-dom(v18.2.0)
• Add schedulerHeader spin for when changing view and date
• ...etc

[avichovatiya67]

I am using day view to show some events for some resources.

How can I disabled the passed time and change its background color to greyish to indicate it as disabled and past.

[hbatalhaStch]

I am using day view to show some events for some resources.

How can I disabled the passed time and change its background color to greyish to indicate it as disabled and past.

here is an example:

let schedulerData = new SchedulerData('2017-12-17', ViewType.Week, false, false,
            { 
                // SchedulerDataConfig
            },
            {
                getNonAgendaViewBodyCellBgColorFunc: (schedulerData, slotId, header) => {                    
                    if(dayjs(header.time).hour() < 10 ){
                        return '#87e8de';
                    }                
                    return undefined;
                }
            }
            );

Beware, I tested on the fork react-big-scheduler-stch but it should work on react-big-scheduler with absolutely no problems so you probably should use moment instead of dayjs if you feel like it.