Angular-calendar: Can't refresh the calendar with async

[Swyn]

Hi,

I've been trying to get this fixed by myself but I can't figure out why it's not working...

Here is my plunker :
https://plnkr.co/edit/4am3IFjBlfAStfQAMGTq?p=catalogue

I get my datas from a request.
When the page load I can't get the events to be displayed inside the calendar but they do get display correctly inside the edit event section.... (title / date / colors are ok).

Sorry the component code isn't very clean I tried several things.

[mattlewis92]

Hello, it looks like you're missing some files in your plunker?

[mattlewis92]

Gave it some more thought, based on the files you provided, I think if you use the async pipe for passing your events to the calendar it should solve the issue (when you call refresh angular's change detection hasn't yet picked up that the events array has changed so it still thinks events is undefined). There is a demo of how to use it here: https://mattlewis92.github.io/angular-calendar/#/async-events Hope that helps!

[WouterVanherck]

Heya! I've been boxing against the same issue. My calendar doesn't refresh after filling the events array via an async way. Have tried the above and the easy workarounds of Issue #82 and #103.

TS-File:

export class CalendarComponent implements OnInit {
  ...
  refresh: Subject<any> = new Subject();
  allEvents: SpikesEvent[] = [];
  events: SpikesEvent[];

  ngOnInit() {
    this.loadEvents();
    ...
    this.events = this.allEvents;
    this.refresh.next();
  }

  loadEvents(): void {
    this._feedService.getAllFeeds().subscribe(
      (allFeeds: Feed[]) => {
        for (let news in allFeeds) {
          this.allEvents.push({
            start: startOfDay(allFeeds[news].created),
            title: allFeeds[news].description,
            color: colors.yellowsunflower,
            type: "newsItem",
            id: (allFeeds[news].id).toString(),
          });
        }
      });
  }
}

HTML-File is almost the same as the kitchen-sink
(I removed the above events$ way because it was not updating)

[mattlewis92]

this.allEvents.push doesn't create a new array and angular doesn't deep watch arrays for changes so it never knows anything has changed. After

for (let news in allFeeds) {
          this.allEvents.push({
            start: startOfDay(allFeeds[news].created),
            title: allFeeds[news].description,
            color: colors.yellowsunflower,
            type: "newsItem",
            id: (allFeeds[news].id).toString(),
          });
        }

You need to call this.refresh.next(); or create a new array before adding the event like so:

this.allEvents = [];
for (let news in allFeeds) {
          this.allEvents.push({
            start: startOfDay(allFeeds[news].created),
            title: allFeeds[news].description,
            color: colors.yellowsunflower,
            type: "newsItem",
            id: (allFeeds[news].id).toString(),
          });
        }

[WouterVanherck]

I've tried them both without results. I understand thatthis.allEvents isn't a "new" array but I'm copying that array to this.events in ngOnInit. I think this way, the events array could be seen as "new" by Angular and it should update?

[mattlewis92]

It will only be seen as new when the component is initialised. loadEvents is async so will be called after you assign the variable so angular never knows the value has changed. This should work:

export class CalendarComponent implements OnInit {
  ...
  refresh: Subject<any> = new Subject();
  allEvents: SpikesEvent[] = [];
  events: SpikesEvent[];

  ngOnInit() {
    this.events = [];
    this.loadEvents();
  }

  loadEvents(): void {
    this._feedService.getAllFeeds().subscribe(
      (allFeeds: Feed[]) => {
        this.events = []; // create a new array here, angular will then be able to pick it up
        for (let news in allFeeds) {
          this.events.push({
            start: startOfDay(allFeeds[news].created),
            title: allFeeds[news].description,
            color: colors.yellowsunflower,
            type: "newsItem",
            id: (allFeeds[news].id).toString(),
          });
        }
      });
  }
}

[WouterVanherck]

I'm using the array allEvents because I have multiple methods that load events and I don't want them to override each other. However, if I was only using one method, this wouldn't work for me 'cause my log showed that this.events was null after trying this out.

Edit: If you're still able to help me (has been great so far).
Here's a more complete example of my current code

Edit 2: It's working, I somehow entered wrong dates which made it so the events didn't show, I feel somehwat defeated but I can't thank you enough for helping me

[mattlewis92]

Glad you got it sorted 😄

[adamhrosenberg]

this.refresh.next() worked for me. thank you.

[chanaka725]

this.refresh.next() is not working in angular 5 what should i do?

[belkashehaj]

this.refresh.next() worked for me :)

[TaimoorRana]

My problem was the start and end time as well. I Fixed those and events now shows on the calendar

[dev7asp]

Hi @mattlewis92,
Hope you are doing well. I am using the calendar to display appointments in "day view scheduler", getting records from server end and binding event to calendar but I am facing a issue to load data in view when page loads or when I insert new event and it is showing if i do next or previous but not first time when data load. I have tried to figure out it with the help of this.refresh.next() or by calling change detector when data loads and add to calendar events but no luck.
Please suggest me any event or the way so that I can able to see my data in calendar view on page loads or whenever new data added.
Thanks

[RogerBrad]

this.refresh.next() worked for me too. Thank you !!!

[abbasogaji]

this.refresh.next() doesnt work for me after making an api on my async events

[AliciaD2018]

same