将事件显示为 angular 全日历

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]”数组并且我提供服务

schedule.ts

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,“name”: "subject 2""start_time":"2019-07-28 00:00:00"},{"id":3,"name":"subject 3""start_time":"2019-07-30 00:00 :00”}]}

日历.ts

jsonEvents:any=[];

 ngOnInit(){

    this.svc.getData().subscribe(data=>this.jsonEvents=data);

  }

我不知道如何在日历中显示 jsonEvents 而不是 events 数组。 所以请帮助我。

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