FullClendar :: Calendar issue in angular5 application

Hi all i'm using following calendar in my angular5 application
ng-fullcalendar
I have implemented as below
HTML Code

<div *ngIf="calendarOptions">
    <ng-fullcalendar #ucCalendar 
    [options]="calendarOptions" 
    (eventClick)="eventClick($event.detail)"
    [(eventsModel)]="events"></ng-fullcalendar>
</div>

My component.ts code

import { Component, OnInit, ViewChild } from '@angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';
import { EventSesrvice } from './event.service';

@Component({
    selector: 'app-calendar',
    templateUrl: './calendar.component.html'
})
export class AppCalendarComponent implements OnInit {

    calendarOptions:Options;
    data: any[];

    @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
    constructor(private eventService: EventSesrvice) {}
    ngOnInit() {
        this.eventService.getEvents().
        subscribe(suc => {this.data = suc, console.log(this.data)});
        if (this.data.length != 0) {
            this.calendarOptions = {
                editable: true,
                eventLimit: false,
                header: {
                  left: 'prev,next today',
                  center: 'title',
                  right: 'month,agendaWeek,agendaDay'
                },
                events: this.data
              };
        }

    }

    eventClick(item) {
        console.log(item);
    }

    clickButton(item) {
        console.log(item);
    }

}

My Service.ts code

import { Inject, Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
@Injectable()
export class EventSesrvice {
    public getEvents(): Observable<any> {
        const dateObj = new Date();
        const yearMonth = dateObj.getUTCFullYear() + '-' + (dateObj.getUTCMonth() + 1);
        let data: any = [{
            DoctorsCount: 5,
            TotalAppointments: 20,
            Booked: 10,
            Cancelled: 2
        },
        {
            title: 'Long Event111',
            start: yearMonth + '-07',
            end: yearMonth + '-10'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: yearMonth + '-09'
        }];
        return Observable.of(data);
    }
};

I am able to display last two objects in the calendar but i am unable to display below object which is first object in service.ts

            {
                DoctorsCount: 5,
                TotalAppointments: 20,
                Booked: 10,
                Cancelled: 2
            }

how to show all data in side the calendar (i mean above object)
You can find demo in below link
STACKBLITZ
I have tried like below in service.ts code

import { Inject, Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
@Injectable()
export class EventSesrvice {
      obj = {DoctorsCount: 5,
        TotalAppointments: 20,
        Booked: 10,
        Cancelled: 2};
    public getEvents(): Observable<any> {
        const dateObj = new Date();
        const yearMonth = dateObj.getUTCFullYear() + '-' + (dateObj.getUTCMonth() + 1);
        let data: any = [{
            DoctorsCount: 5,
            TotalAppointments: 20,
            Booked: 10,
            Cancelled: 2
        },
        {
            title : JSON.stringify(this.obj),
            start: yearMonth + '-08',
            end: yearMonth + '-9'
        },
        {
            title: 'Long Event111',
            start: yearMonth + '-07',
            end: yearMonth + '-10'
        },
        {
            id: 999,
            title: 'Repeating Event',
            start: yearMonth + '-09'
        }];
        return Observable.of(data);
    }
};

it is displaying as below
is it correct???




from FullClendar :: Calendar issue in angular5 application