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

он отображается ниже enter image description here

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

enter image description here

enter image description here

Ответы

Ответ 1

Насколько я понимаю, вы хотите добавить пользовательские данные в событие? Если ваш объект:

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

просто добавьте ключ события: (start, end) с ним, и вы сможете отображать в календаре, например:

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

то в событии календаря, которое есть, вы можете получить этот объект по $ event.detail.event

в вашем коде, который вы используете: (eventClick)="eventClick($event.detail)"

а также

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

ОБНОВИТЬ

Ваш вопрос не ясен, я вижу в ваших комментариях, что вы хотите отображать, как 3-е фото, поэтому ваше решение настраивается рендерингом с помощью eventRender

HTML:

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

и в вашем компоненте.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)
}

и ваше обслуживание:

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
    },
    ...

Это обновленная демонстрация: https://stackblitz.com/edit/ng-fullcalendar-demo-ujqghm