FullClendar :: Calendar issue in angular5 application

Question

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???

Answer 1

For my understanding, do you want to add custom data in an event? If your object is:

{
    DoctorsCount: 4,
    TotalAppointments: 19,
    Booked: 9,
    Cancelled: 1
}

just add the event key: (start,end) with it and you will be able to render in the calendar, for example:

{
    DoctorsCount: 4,
    TotalAppointments: 19,
    Booked: 9,
    Cancelled: 1,
    start: yearMonth + '-01',
}

then in the calendar's event click which is, you can get these object by $event.detail.event

in your code you use: (eventClick)="eventClick($event.detail)"

and

eventClick(model: any) {
    // you can get current DoctorsCount by 
    model.event.DoctorsCount
      model = {
          event: {
            id: model.event.id,
            start: model.event.start,
            end: model.event.end,
            title: model.event.title,
            allDay: model.event.allDay,
            // other params
            DoctorsCount: model.event.DoctorsCount,
            TotalAppointments: model.event.TotalAppointments,
            Booked: model.event.Booked,
            Canceled: model.event.Canceled
          },
          duration: {}
    }
    this.displayEvent = model; 
}

UPDATE

Your question is not clear, I see in your comments that you want to have to display like the 3rd pics, so your solution is by customising the rendering with eventRender

HTML:

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

and in your component.ts

eventRender(e) {
    const html = `<ul>
      <li>DoctorsCount: ${e.event.DoctorsCount}</li>
      <li>TotalAppointments: ${e.event.TotalAppointments}</li>
      <li>Booked: ${e.event.Booked}</li>
       <li>Cancelled: ${e.event.Cancelled}</li>
    </ul>`;
    e.element.html(html)
}

and your service:

let data: any = [{
        start: yearMonth + '-01',
        DoctorsCount: 5,
        TotalAppointments: 20,
        Booked: 10,
        Cancelled: 2
    },
    {
        start: yearMonth + '-02',
        DoctorsCount: 8,
        TotalAppointments: 20,
        Booked: 10,
        Cancelled: 2
    },
    ...

This is the updated demo: https://stackblitz.com/edit/ng-fullcalendar-demo-ujqghm