将事件显示到角度角度完整日历

Question

日历.html

<full-calendar 
defaultView="dayGridMonth"
[plugins]="calendarPlugins"
[weekends]="true"
[events]="[
{ title: 'event 1', date: '2019-06-07' },
{ title: 'event 2', date: '2019-06-12' }
]"
></full-calendar>

和这个如何看起来

一切都很好，但 ı 希望从 JSON 加载事件而不是"[events]"数组和 ı make 服务

时间表

export class ScheduleProvider {
constructor(public http: HttpClient) {
console.log('Hello ScheduleProvider Provider');
}
getData():Observable<any[]>{
return this.http.get<any[]>('url/events');
}
}

这是我的 JSON 网址/事件

{"data"：

[{"id"：1，"name"："subject 1"start_time"："2019-07-21 00：00：00"}，{"id"：2，"名称"："主题 2"start_time"："2019-07-28 00：00：00"}，{"id"：3，"名称"："主题3"start_time"："2019-07-30 00：00：00"}]}

日历.ts

jsonEvents:any=[];
ngOnInit(){
this.svc.getData().subscribe(data=>this.jsonEvents=data);
}

ı 不知道如何在日历而不是事件数组中显示 json事件。所以请帮助我。

Answer 1

我知道这很旧，如果您无法在 API 中更改以 FullCalendar 接受的格式返回数据，您可以尝试转换数据吗，我已经在 OnInit 中完成了，方式如下：

1.致电服务获取日期 2.映射数据以仅返回响应中的事件 3.简单的循环将数据映射到FullCalendar接受的数据

ngOnInit(): void {
this.eventService.getEvents(1000, 1).pipe(map(data=>data.events)).subscribe(
data => {
for(let d of data) {
const date = new Date(d.dateStart)
const simpleDate = date.toISOString().split('T')[0]
this.currentEvents.push({title: d.title, start: simpleDate, url: d.slug, end: d.dateEnd, allDay: true})
}
this.calendarOptions = {
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'dayGridMonth,listWeek,listYear'
},
initialView: 'dayGridMonth',
events: this.currentEvents,// alternatively, use the `events` setting to fetch from a feed
eventColor: '#3F51B5',
eventDisplay: 'auto',
eventTextColor: '#FFFFFF',
weekends: true,
editable: false,
selectable: false,
selectMirror: true,
dayMaxEvents: true,
firstDay: 1,
eventClick: this.handleEventClick.bind(this),
eventsSet: this.handleEvents.bind(this)
};
}
);