Привет всем Я использую следующий календарь в моем приложении 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);
}
}
Мой код 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);
}
};
это правильно???