Html FullCalendar上的云存储数据 我可以在FullCalendar中使用Observable吗？

我希望从云Firestore中的集合接收数据并显示这些值​​在完整日历中实时显示

要做到这一点，我知道我必须使用Observable，但我相信FullCalendar不适用于Observable

我可以通过从Cloud Firestore接收数据来更新FullCalendar中的实时数据吗

组件。ts:

import { Component, OnInit } from '@angular/core';

import { AngularFirestore, AngularFirestoreCollection } from 'angularfire2/firestore';

export interface Task {
  title: string;
  start: string;
  end: string;
  color: string;
}

@Component({
selector: 'app-component',
templateUrl: './app.component.html'})

export class AppComponent implements OnInit {

  private taskCollection: AngularFirestoreCollection<Task>;
  tasks: Observable<Task[]>;

  constructor(private afs: AngularFirestore) {

    this.taskCollection = this.afs.collection<Task>('task');
    this.tasks = this.taskCollection.snapshotChanges()
    .map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as Task;
        return { ...data };
      })
    })
}

ngOnInit() {}

<p-schedule [events]="tasks" 
            [defaultView]="'agendaWeek'" 
            [selectable]="true" 
            [selectHelper]="true" 
            (select)="onSelect($event, modal)" 
            [allDaySlot]="false" 
            [droppable]="false" 
            [editable]="true" 
            [dragScroll]="false"
            [nowIndicator]="true" 
            (onEventClick)="onEventClick($event, modal)"
            [header]="headerConfig" 
            #fc></p-schedule>

---

由于可以观察到

任务

，只需尝试在模板中添加

async

管道即可：

<p-schedule [events]="tasks | async" 
            defaultView="agendaWeek" 
            [selectable]="true" 
            [selectHelper]="true" 
            (select)="onSelect($event, modal)" 
            [allDaySlot]="false" 
            [droppable]="false" 
            [editable]="true" 
            [dragScroll]="false"
            [nowIndicator]="true"   
            (onEventClick)="onEventClick($event, modal)"
            [header]="headerConfig" 
            #fc></p-schedule>

---

谢谢，我还以为不可能呢！很乐意帮忙：）事实上，angular2有一个非常相似的例子：

<p-schedule [events]="tasks | async" 
            defaultView="agendaWeek" 
            [selectable]="true" 
            [selectHelper]="true" 
            (select)="onSelect($event, modal)" 
            [allDaySlot]="false" 
            [droppable]="false" 
            [editable]="true" 
            [dragScroll]="false"
            [nowIndicator]="true"   
            (onEventClick)="onEventClick($event, modal)"
            [header]="headerConfig" 
            #fc></p-schedule>