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:
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.
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
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?
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.
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);
}
}
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?