Event Calendar is not updating after getEvents(date)

Event calendars & schedulers
1

I am updating event on the page that is different from where event calendar is located (eventDetails page). I subscribe to the event so once the event is updated I can update the calendar:

    this.events.subscribe('create-practice', (practice) => {
      if (practice) {
        this.calendar.instance.addEvent([this.getPracticeEvent(practice)]);
        this.selectedEvents = this.calendar.instance.getEvents(this.selectedDate);
      }
    });

The data is passed successfully, but DOM is not updated. when I print out in the console this.selectedDates it shows data before the update.

The same thing happens if I call refresh() that pulls events from the server. From calendar page it refreshes fine, but If I call that through subscription it does not work. However if I click on the date which calls onSelectedDate() it works fine (without refreshing).

I hope you understand the problem.

2

Hi @Nikola_Andelic,

Thanks for the question! If you are using angular, you pass the array of events to the Eventcalendar. When adding or changing events, you should work on the array you passed to it. In these use cases there’s no need to use the instance setEvents and/or getEvents methods.
For example:

<mbsc-eventcalendar [data]="myEvents">

and when you want to add an event, just push to the myEvents array:

this.events.subscribe('create-practice', (practice) => {
    if (practice) {
        this.myEvents.push(practice);
    }
});

Please let me know if that works, or if I misunderstood something!

Best,
Zoli

3

Zoli,

I want to confirm that this does not work. It works only if it is called from the same page, modal or popup, but it does not work when it’s called from other page.

My event calendar looks like this

    <mbsc-eventcalendar *ngIf="viewActive" [data]="eventSource" [marked]="markedDays" [options]="eventSettings" #mbscCalendar></mbsc-eventcalendar>

and my subscribe event looks like this

    this.events.subscribe('create-practice', (practice) => {
      if (practice) {
        console.log(this.eventSource);

        this.eventSource.push(this.getPracticeEvent(practice));
        console.log(this.eventSource);
        this.selectedEvents = this.calendar.instance.getEvents(this.selectedDate);
      }
    });

I see that eventSource is updated, but when I try to getEvents it returns old values. When I click on the date correct events load (selectedEvents is updated correctly).

Thanks

4

I’m afraid I don’t understand the problem. Could you give me a bit of context or better yet share a working example where I can see what you are trying to achieve? If it’s easier for you, you can find a starter app that you can edit and send back to me here.

5

Zoli,

Instructions: Copy app folder to you mbsc starter Ionic 4 app. Open console. Home page will load some data and subscribe to ‘update-events’. Go to Settings page and click on “Push Event” button. It will publish event to ‘update-events’. In console it will print out eventSource and selectedEvents. Notice that eventSource is increased by 1 and selectedEvents did not take in account newly added event. When you click on on the current date additional event will be loaded.

If you push/publish event from modal or popup this will work fine.

I hope this makes sense.

I zipped app folder and put it on my dropbox. I hope that works.
https://www.dropbox.com/s/3c7d3emblr752ve/app.zip?dl=0

6

Thanks a lot for the example. It helped a lot to narrow down the issue. So the problem here is, that when you navigate to another view, the previous view where the calendar is, will be detached. This means that change detection for components inside of that view won’t be triggered. Thus pushing the event to the eventSource array won’t have any side effects until you activate the view, by navigating back to the calendar. When you do so, the change detection will be triggered and the calendar will pick up the newly added event.

There are multiple solution depending on what would you like to use the selectedEvents array for. If you would like to update the list of events and selectedEvents from multiple sources, my recommendation would be to use a filter function, for ex:

this.eventSource.push(this.getPracticeEvent(practice));
const selected = new Date(this.selectedDate); // when using strings for dates you'll need to convert to Date obj.
this.selectedEvents = this.eventSource.filter((e) => new Date(e.start) <= selected && new Date(e.end) >= selected);

Let me know if that makes sense!
Also, while the above should work, by giving me a bit more context on what are you using the selectedEvents array for, might help me give you other solutions. I can think of a few right now, but it really depends on what you need.

Let me know!

7

I played around it for about 15 min and was not able to get it to work.

I use selectedEvents to display custom template for events below the calendar. Also I think the problem is to reload marked events. I am guessing it would be similar approach…

8

I used this code to make it work. It was returning empty array. The difference is getDate().

        this.selectedEvents = this.eventSource.filter((e) => new Date(e.start).getDate() <= selected.getDate() && new Date(e.end).getDate() >= selected.getDate());
        this.selectedEvents.sort((a, b) => {
          return new Date(a.start).getTime() - new Date(b.start).getTime();
        });