Our powerful JS Calendar component


Post by abhi »

Hi,

When changing modes(day, week, month, timeline), I would see that event type daterangechange does not get trigger all the time.

Bug gif
Bug gif
bug1.gif (6.22 MiB) Viewed 475 times

Sample Project:

bryntumcalendar.zip
Sample project
(265.72 KiB) Downloaded 44 times

(This is not exact replica of my project just a quick sample)

Can you please have a look and let me know what may be causing it.


Post by marcio »

Hello abhi,

Thanks for the report, I reproduced that in one of our demos, here's a ticket for it https://github.com/bryntum/support/issues/5265

As a workaround, perhaps you could use https://www.bryntum.com/docs/calendar/api/Calendar/view/Calendar#event-activeItemChange??

Best regards,
Márcio


Post by Animal »

If you have loaded a month's data in the MonthView, then when you move to the WeekView, the store does not have to load more data.

This event is intended to be used to load the data needed. When the data for the required range to produce the UI changes this event is fired. Obviously the Month's data contains the week's data.

For what purposes are you listening to that event?

If you want to discard the full contents of the event store between each view change, you might add this:

calendar.viewContainer.on({
    beforeActiveItemChange() {
        calendar.eventStore.removeAll(true);
    }
});

But I'm curious to know what application problem you are tackling using this approach.


Post by abhi »

Hi Animal,

Above mentioned line is already been added in main application. Also, we want fresh data to be load every time any action(mode or range change) is done in calendar. This will help in reflecting changes done by other users.

Issue which i m facing is, when moving between modes(mainly Timeline -> Week or vice versa). Event type 'daterangechange' stops triggering. Then when we change to any other modes it will start working again.

Reason why we are using 'daterangechange' is because it contain new start and end date within its object.


Post by Animal »

Then the solution suggested above will work for you. You need to tip out all existing data before mode active item change.


Post by abhi »

Hi Animal,

I have added suggested line in 'beforeactiveitemchange'. It does not seem to fix the issue.
this.removeAllExistingData is commented in sample project, needs to be uncommented for suggested line to work

Note: TimeLine mode resource are based of inspector name and Other Mode resource are based of status. Please check data.ts file timelineData and monthData for more details

bryntumcalendar.zip
(265.98 KiB) Downloaded 47 times

Is there any work around for this?
Also, is it working for you when you add it in the given sample project?


Post by Animal »

I don't understand what you are doing there. Loading events both before item change and on date range change.

Just do as suggested above. Clear the store before active item change. That's all you have to do. Because obviously, then when the new item requests its data, it will trigger a load.

getCalendarModeRecords... what is it hoping to see in the event? The daterangechange event doesn't have an activeItem property. Are you stepping through this code to debug it and looking at what is happening?


Post by abhi »

Hi Animal,

Sorry for the confusion. I cleared out all unnecessary code and added what is been suggested. Also, angular version what i m using in my project and sample was wrong fixed that also. Giving you new sample project.

bryntumcalendar.zip
(291.22 KiB) Downloaded 46 times

With debugger

bug.gif
bug.gif (12.5 MiB) Viewed 426 times

As you can see that once we visit from timeline to week mode, event type 'daterangechange' did not trigger


Post by marcio »

Hello abhi,

As Animal already mentioned, you should not use 'daterangechange' to trigger every time the user changes the view, for that, you should use 'beforeactiveitemchange' and 'activeitemchange', I updated the event switch to work similar as you were trying to use on that sample.


onCalendarEvents(event: any): void {
    //TODO: This block will be used in upcoming task
    console.log('event', event);

    // Uncomment the code in this method to start "logging" events
    switch (event.type) {
        case 'beforeactiveitemchange' : {
            this.calendarMode = event.activeItem.modeName;
            this.resources = [];
            this.events = [];
            this.assignments = [];
            this.eventStore.removeAll(true);
            this.calendar.eventStore.removeAll(true);
            break;
        }
        case 'activeitemchange' : {
            // call to get data based on data range change
            console.log('mode', this.calendarMode, 'event type', event.type);
            this.getDateRangeRecords(event);
            break;
        }

    }
}

getDateRangeRecords(event: any) {
    if (event.activeItem) {
        const newItemView: any = event.activeItem;
        const params: any = {
            startDateAfter  : newItemView.startDate,
            startDateBefore : newItemView.endDate
        };
        this.changeSearchCriteria(params);
    }
}

https://www.bryntum.com/docs/calendar/api/Calendar/view/Calendar#event-activeItemChange

Best regards,
Márcio


Post by abhi »

Hi Marcio,

Yes, i can change it to activeitemchange. But issue is for prev and next (day, week, month) in view, activeitemchange does not get triggered, daterangechange will get triggered. But if i introduce both in onCalendarEvents function. Then when choose different mode twice call will happen because change mode triggers activeitemchange and daterangechange.

Or is there a different event type i should use for prev and next in calendar view?


Post Reply