FullClendar :: Задача календаря в приложении angular5

Привет всем Я использую следующий календарь в моем приложении angular5

нг-fullcalendar

Я выполнил следующие действия

Код HTML

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

Мой код component.ts

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);
    }

}

Мой код Service.ts

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);
    }
};

Я могу отображать последние два объекта в календаре, но я не могу отобразить ниже объекта, который является первым объектом в service.ts

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

как показать все данные в кадре (я имею в виду выше объекта)

Вы можете найти демонстрацию в ссылке ниже

STACKBLITZ

Я пробовал, как показано ниже в коде service.ts

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);
    }
};

он отображается ниже

это правильно???