List of events for a day is not changing after selecting another day

[Dafnik]

Describe the bug
After clickling in the month view on another day, the list of all events on this day is not changed. Sometimes it changes (after a long pause) and sometimes it doesn't change at all. Please note that this bug isn't affecting the demo and in my example I simply copied the demo.

Minimal reproduction of the problem with instructions

• Copy the demo to a new project.
• Select the month view
• Click on another day

Screenshots
Streamable link

Versions

• @angular/core: 7.2.14
• angular-calendar: 0.27.5
• Browser name and version: Chromium - 73.0.3683.86 and Firefox - 66.0.3

[matts-bot]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider supporting me on Patreon

[mattlewis92]

Hey, sorry to hear you're having issues, please can you attach a runnable stackblitz that reproduces your issue? Without it I can't really tell what's going on, thanks! 😄

[Dafnik]

Here you go: Stackblitz app
And here you can edit everything: Stackblitz edit mode

[mattlewis92]

Wow, that's so weird, it's like change detection just isn't working. If I call detectChanges after the dayClicked output it fixes it (https://stackblitz.com/edit/angular-eveyex?file=src%2Fapp%2Fapp.component.ts), but that shouldn't be needed at all.

[Dafnik]

Maybe it's a bug in Angular. Anyways thank you for the "dirty fix"! :)

[cosf87]

I have this issue after upgrading from 0.27.2 to 0.27.3 version

[mattlewis92]

Ahhhh, yes, it'll be the lazy click handlers. I'll see what I can do!

[mattlewis92]

Fixed in 0.27.6!

[Dafnik]

I don't know if this belongs here, but if I'm adding an event to the events array after ngInit (Fetching data etc from a server) it's also don't updating the complete calendar view. With cdr.detectChanges() it's working.

[mattlewis92]

@Dafnik - Can you make a repro?

[Dafnik]

Sure, https://stackblitz.com/edit/angular-eveyex

[mattlewis92]

Sorry I'm not sure I can see the issue, the stackblitz is the one from this comment: #959 (comment)

[Dafnik]

Sorry, I shared the wrong url. Here you have the new one, adding an event after three seconds. I hope you can see that the calendar view isn't updating until you click on it.
https://stackblitz.com/edit/angular-ildcfe

[mattlewis92]

Oh I see the issue, it's because you're using .push which doesn't create a new array references so angular doesn't know anything changed. You need to do something which creates a new array reference like this:

this.events = [
   ...this.events,
   {
          start: addHours(startOfDay(new Date()), 2),
          end: new Date(),
          title: 'An event added after three seconds',
          color: colors.yellow,
          actions: this.actions,
          resizable: {
            beforeStart: true,
            afterEnd: true
          },
          draggable: true
        }
]

[Dafnik]

Ohh, thank you!