Question

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

我已实现如下

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

}

我的服务代码

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

<强>更新

您的问题不明确，我在您的评论中看到您希望显示第3张照片，因此您的解决方案是使用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

angular5应用程序中的FullClendar :: Calendar问题

1 个答案: