Our powerful JS Calendar component


Post by tokytok »

Hi,

I have a calendar with a lot of events.
Render timing is very slow, is it normal ?

So, I think about load events dynamically on date change.

Is there a way to do this?
Instead of, is it possible to catch click event on previous, next and today button ?

I imagined something like this :

previousClick : (event) => {
    var startDate = moment(calendar.date).startOf('week');
    var endDate = moment(calendar.date).endOf('week');

    calendar.crudManager.load({
        request : {
            params : {
                startDate : startDate,
                endDate   : endDate
            }
        }
});
}

Thanks :)


Post by Animal »

Do you mean that loading your whole set of event data is very slow? If there are a very great many events, then bandwidth may be a problem, but there would have to be very many events for that. Perhaps your server is not performing very well?

Or do you mean that once all the data is loaded, there is another delay while rendering. The two phases are very separate.

It is certainly possible to load on demand. There is a Feature which allows you to do it: https://www.bryntum.com/docs/calendar/#Calendar/feature/LoadOnDemand

But I'd prefer to get some clarity on exactly where the time is going.

Some profiling would be good. Use Chrome's profiling tool to see what's happening:

Screenshot 2021-05-07 at 16.39.38.png
Screenshot 2021-05-07 at 16.39.38.png (75.17 KiB) Viewed 1506 times

Also the Network tab to show details about HTTP requests. This will tell you if the request for data is delayed:

Screenshot 2021-05-07 at 16.41.34.png
Screenshot 2021-05-07 at 16.41.34.png (108.14 KiB) Viewed 1506 times

Post by tokytok »

The load fetch is about 300ms, but the render is about 6 secondes (not a server problem).
To display recurring events on agenda correctly, my fetch request constuct all single event over a year (for each recurring event).


Post by tokytok »

Cool for Calendar.feature.LoadOnDemand, it work :)


Post by Animal »

You do not construct all occurrences of recurring events.

You must only send from the server the base of the recurring event. Occurrences are inserted into the result from https://www.bryntum.com/docs/calendar/#Scheduler/data/EventStore#function-getEvents

The includeOccurrences option is true by default, so it interpolates any necessary occurrences into the returned set of events.

6 seconds. That needs to be profiled using the Performance tab to see where the time goes.

Rendering events is extremely fast. This example has.... a lot and has no delay at all: https://www.bryntum.com/examples/calendar/bigdataset/


Post by tokytok »

viewtopic.php?f=54&t=15877

It was the problem with the agenda view, is it resolved ?


Post by tokytok »

Yes it look to be resolved on the demo ! Not need to do this hack anymore !


Post by Animal »

Yes, the AgendaView did not have a limited time range before, so it attempted to render your entire loaded data set.

In the latest version, it has a settable range so that there is a manageable amount of data to show:

Screenshot 2021-05-07 at 17.22.19.png
Screenshot 2021-05-07 at 17.22.19.png (21.51 KiB) Viewed 1498 times

https://www.bryntum.com/docs/calendar/#Calendar/widget/AgendaView#config-range


Post Reply