Cfrgtkky

I'm working on an Angular 6 application which uses fullCalendar to display events from an external API. I want to render events only for a given month. Initially, it shows the events for the current month but as I change the months from the next and previous button on the top, the calendar is displayed empty.
However, the api service does brings the events on changing the months but they aren't displayed in the calendar.

Here's my code:

HTML:

<div *ngIf="calendarOptions">

      <ng-fullcalendar #ucCalendar 

      [options]="calendarOptions" 

      [(eventsModel)]="events"

      (eventClick)="handleClick($event.detail.event.data)"

      (clickButton)="clickButton($event.detail)"></ng-fullcalendar>

  </div>

Here's the code for displaying events while changing the months:

  clickButton(data) {

    this.displayEvent = data;

    // console.log(JSON.stringify(this.displayEvent))

    var extractDate = new Date(this.displayEvent.data);

    var m = extractDate.getMonth();

    var y = extractDate.getFullYear();

    var getClinic = m + "-" + y;

    this._dataSrvc.getEventsByMonth({ month: m, year: y }).subscribe( data => {

      this.events = data;

      console.log(this.events.data);

      this.ucCalendar.renderEvents(this.events);

    } );

  }

I think it's got something to with renderEvents function but somehow it's not working as the events are fetched but not displayed. If anyone can help me how exactly to use that, it would be helpful.