Angular-calendar: Events Not Displaying Unless I Click on Calendar

[brettgibson5]

Was using the [refresh] observable to refresh my month view when I got the events back from my API source. This used to be working & now just shows a blank calendar, but if I click on any part of the calendar, the events populate perfectly. Any idea what the issue is here?

Much appreciated,
Brett

Bug description / Feature request:

For bugs only, a link to minimally working plunker that reproduces the issue (you can fork a starter from any of the demos)

Versions

Angular: 4.1.2

Calendar library: 0.14.0

Browser name and version: Chrome

[mattlewis92]

Can you make a plunker that reproduces your issue? Thanks!

[brettgibson5]

I actually figured it out (not plunkr but hope this can shed some light just on here). In our calendar, we get the results from the API and then run it through a loop (called loopThroughEvents()). Then, I would use the this.refresh.next() and should refresh the view. The solution oddly came by just commenting out the changeDetectionStrategy.OnPush line. This very well may be a unique bug because of our data, but if not, hope this is enough information to share.

@Component({
  selector: 'vendor-calendar-dashboard',
  // changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './calendar-dashboard.component.html',
  styleUrls: ['./calendar-dashboard.component.scss'],
})

events: CalendarEvent[];
refresh: Subject<any> = new Subject();



md5-6d1535d73f7563fa92d7d303e672b422



ngOnInit() {
  this.getCalendarEvents();
}

loopThroughEvents(res){
  var obj: Array<any> = [];
  for (var i = 0; i < res.length; i++) {
    var event: Object = {
      id: res[i]['id'],
      title: res[i]['title'],
      color: this.color,
      repeating: res[i]['repeating'],
      start: new Date(res[i]['start']),
      end: new Date(res[i]['end'])
    }
    obj.push(event)
  }
  this.events = obj;
  this.refresh.next();
}

getCalendarEvents() {
  return this.trucksService.getCalendarEvents()
    .subscribe( data => {
      this.loopThroughEvents(data);
    })
}

[mattlewis92]

Ah thanks for explaining that a bit more, I believe the issue was caused by using detectChanges instead of markForCheck, for anyone interested this is a really good explanation of the difference between the two. Should be fixed now in 0.15.1, thanks for reporting! 😃

[sixsixtrample]

( I know this is closed, but it seemed the best continuation of the issue)

I am getting this same error. If I use changeDetection: ChangeDetectionStrategy.OnPush, I have to click on the header to make the calendar appear, but if I comment this out I get an error in the console when clicking on the 'week' view.

CalendarWeekViewComponent.html:11 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '181'. Current value: '183'.

It still switches the view, but I see that error in the console. I am using a service to update an observable with events like so:

fetchEvents() {
    this.workItemTaskService.getWorkItemTasks().subscribe(data => {
      this.events$ = data.results.map(event => {
        return {
          start: new Date(event.scheduled_date),
          title: 'Test',
          color: colors.red,
          meta: {
            hours_required: event.hours_required
          }
        }
      });
    });
}

[johnDivek]

in html
refresh: Subject = new Subject(); in ts
once response from http call use just use this
this.refresh.next();
oooooooooooooooooo that works

[paolagodoy]

in html
refresh: Subject = new Subject(); in ts
once response from http call use just use this
this.refresh.next();
oooooooooooooooooo that works

Gracias! esto me funcionó perfecto