angular - FullCalendar::Angular 5 应用程序中的日历问题

Question

大家好，我正在使用以下内容我的 angular5 应用程序中的日历

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

显示如下

正确吗？？？

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

更新

你的问题不清楚，我在你的评论中看到你想要像第三张图片那样显示，所以你的解决方案是使用 eventRender 自定义渲染

HTML:

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

在你的 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)
}

和您的服务:

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