MbscEventcalendar change options dinamically

Event calendars & schedulers
1

Hi,

I’m using mbsc-eventcalendar componennt of Mobiscroll 5.22.2 in Angular 15 project.

I am trying to dinamycally update calendar’s options (more precisely startTime and endTime) in component’s onPageLoaded function. This is my template:

<mbsc-eventcalendar id="term"
        [data]="events"
        [options]="eventSettings"
</mbsc-eventcalendar>

and this is the component:

eventSettings: MbscEventcalendarOptions = {
        theme: 'windows',
        // ...
        view: {
            schedule: {
                type: 'week',
                allDay: false,
                startDay: 1,
                endDay: 6,
                startTime: '07:00',
                endTime: '19:00',
                timeCellStep: 5,
                timeLabelStep: 5
            }
        },
        onPageLoaded: (event, inst) => {
             // ....
             this.eventSettings.view!.schedule!.startTime = newStartTime;
             // ....
        }
}

This does not work (no error, but component is not being refreshed) because of Responsive event calendar documentation for Angular | Mobiscroll

For performance reasons Angular’s change detection compares values by reference. This means, that in case of options, which accept complex data structures, like arrays or objects, changes made inside the array or object won’t be detected. To ensure the change is detected, always pass a new array or object reference.

I even tried to deep copy eventSettings object using lodash:

this.eventSettings.view!.schedule!.startTime = newStartTime;
const newEventSettings = _.cloneDeep(this.eventSettings);
this.eventSettings = newEventSettings;

In this case start time in the calender does get updated, but I loose calendar’s functionalities (e.g. onEventCreate does not trigger) and onPageLoaded is executed in an infinite loop.

What is the correct way to accomplish what I’m trying to do?

Thanks,
Petar

2

Hi, the calendar’s options (MbscEventcalendarOptions) are meant to be used for static data. If you want to dynamically change the view, you should handle it differently. Template:

<mbsc-eventcalendar id="term"
        [data]="events"
        [options]="eventSettings"
        [view]="myView"
</mbsc-eventcalendar>

and in component.ts

myView: MbscEventcalendarView = {
    schedule: {
      type: 'week',
      startTime: '07:00',
      // other view settings
    },
  };
eventSettings: MbscEventcalendarOptions = {
        theme: 'windows',
        onPageLoaded: (event, inst) => {
           this.myView = { ...this.calView, schedule: { ...this.calView.schedule, startTime: '10:00' } };          
        }
}

I hope it helps :wink:

3

Hi Istvan,

thanks a lot, that does the trick :wink:

Best,
Petar