在angular5应用程序中的日历问题

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (268)

大家好,我在我的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
            }

如何显示日历中的所有数据(我的意思是上述对象)?

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

它显示如下

这是对的吗?

提问于
用户回答回答于
{
    DoctorsCount: 5,
    TotalAppointments: 20,
    Booked: 10,
    Cancelled: 2,
    title: 'first object',
    start: yearMonth + '-08',
    end: yearMonth + '-9'
}

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动