angular2 fullcalender events are not updated when

I'm using the fullcalendar in Angular4 with help of npm install ap-angular2-fullcalendar --save . The events which are hard coded in the component are instantly shown in the calendar. but when I fetch from service method i.e HTTP call. after receiving events I'm updating calendar events like

template : <angular2-fullcalendar [options]=getCalendarOptions()>{{options | json}}></angular2-fullcalendar>

 getCalendarOptions() {

    let calendarOptions = {
      header:
      {
        left: '',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,today,listYear prev,next '
      },
      dayClick: (date, jsEvent, view) => {

      },
      slotDuration: '00:20:00',
      color: '#456778',
      height: 650,
      defaultView: 'agendaDay',
      slotLabelFormat: 'h(:mm)a',
      businessHours: {
        start: '11:00',
        end: '12:00',
        dow: [1, 2, 3, 4, 5]
      },
      minTime: "09:00:00",
      maxTime: "20:00:00",
      fixedWeekCount: false,
      defaultDate: new Date(),
      editable: true,
      eventLimit: true,
      selectable: true,
      nowIndicator :true,
      selectHelper: true,
      viewRender:( view, element )=>{
        console.log("ViewRender: "+view.start +" ele:" +view.end)

      },
      select: (start, end, allDay) => {

      },

      views:
      {
        agenda: { eventLimit: 2 }
      },
      eventClick: (calEvent, jsEvent, view) => {
         },
      hiddenDays: [],
      events: (start, end, timezone, callback)=>{ //**This place Service is being called to fetch events from server.**
       this.appointmentService.getMonthEvents(start,end,'view').subscribe(
       res=>{
          this.events=res   
       // this.myCalendar.fullCalendar('refetchEventSources', this.events);
        this.myCalendar.fullCalendar('renderEvents', this.events, 'stick')
          console.log("Cal")}
     )
      }
    };

    return (calendarOptions);
  }

But events are not getting updated in full calendar. They are appearing after clicking other calendar views. How to update events instantly after they are available.

Using callback function should work for you:

view.html

<angular2-fullcalendar [options]="calendarOptions" ></angular2-fullcalendar>

component.ts

export class App {
  @ViewChild(CalendarComponent) myCalendar: CalendarComponent;

  calendarOptions: any;

  constructor(private appointmentService: CalendarService) {}

  ngOnInit() {
    this.calendarOptions =  {
      height: '1000',
      fixedWeekCount : false,
      header:
        {
          left: '',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,today,listYear prev,next '
        },
      defaultDate: '2016-09-12',
      editable: true,
      eventLimit: true,
      events: (start, end, timezone, callback)=> {
        this.appointmentService.getMonthEvents()
          .subscribe(res => callback(res)); // just call callback
      }
    };
  }
}

Plunker Example