title: full calendar - passing event data from observable - not showing up on calendar
body: <p>I am using ap-fullcalendar for angular/typescript. I have a data service, where I get the events for the calendar from my database, I wrap the data in a Behaviour Subject and subscribe to it and make it into an observable from another function. I have a data service because I have multiple subscriptions to the same observable. In my component where the calendar is, I subscribe to the data. However, for some reason, the events are not getting passed properly to the calendar and won't show up. I have manually entered some values for events, to check the calendar works fine, which it does. I have outputted what I get from my service (shown below) and it looks fine. What could the issue be?</p>
  
  <p>Data service:</p>
  
  <pre><code>@Injectable()
  export class SubjectEventsService {
  
    allData: EventSchema[] = new Array&lt;EventSchema&gt;();
    allData$: BehaviorSubject&lt;EventSchema[]&gt;;
  
  
    constructor(private afs : AngularFirestore) { 
      //Get subjectEvents collection on initialise
      this.subjectEventCollection = this.afs.collection('subjectEvents');
      this.getSubjectEvents();
    }
  
  
    getSubjectEvents(subjectFilter?:string){
      if(!this.allData$){
        this.allData$ = &lt;BehaviorSubject&lt;EventSchema[]&gt;&gt; new BehaviorSubject(new Array&lt;EventSchema&gt;());
        this.subjectEventCollection.valueChanges().pipe(
          map(res =&gt; {
            let result : EventSchema[] = [];
            res.map(subjectEvent =&gt; {
              let eventSchema : EventSchema[] = subjectEvent.eventData;
              eventSchema.forEach(event =&gt; {
                result.push(event as EventSchema);
              })
            })
            console.log(result);
            return result;
          }))
          .subscribe(events =&gt; {
            console.log(events);
            this.allData = events;
            console.log(this.allData);
            this.allData$.next(events);
          });
        }
      }
  
    subscribeToDataServiceGetSubjectEvents(): Observable&lt;EventSchema[]&gt; {
      console.log(this.allData$);
      return this.allData$.asObservable();
    }
  }
  </code></pre>
  
  <p>Home component (where calendar is):</p>
  
  <pre><code>@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit{
  
    calendarOptions: any;
    displayEvent: any;
    @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
    name: string;
    subjectFilter: string;
  
    allData$: Observable&lt;EventSchema[]&gt;;
  
    constructor(private subjectEventsService: SubjectEventsService, private dialog: MatDialog) { }
  
    ngOnInit(){
      this.subjectEventsService.subscribeToDataServiceGetSubjectEvents().subscribe(data=&gt;{
        let data$:any = data;
        console.log("fun");
        console.log(data);
        this.calendarOptions = {
          editable: true,
          eventLimit: false,
          header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listMonth'
          },
          events: data$,
          //WORKS FINE WITH THIS DATA ENTERED MANUALLY
          // [{
          //   end: "2018-08-13T19:00:00",
          //   price: 10,          
          //   start:"2018-08-13T17:00:00",
          //   title:"Forces"
          // }],
          eventClick: (calEvent, jsEvent, view) =&gt; {
            this.openDialog(calEvent);
            // console.log('Event: ' + calEvent.title);
            // console.log('View: ' + view.name);
          }
        };
      });    
    }
    }
  }
  </code></pre>
  
  <p>Output from subscribe (this is an acceptable format required by the calendar):</p>
  
  <pre><code>Array(4)
  0:{end: "2018-08-13T19:00:00", price: 10, start: "2018-08-13T17:00:00", title: "Forces"}
  1:{end: "2018-08-19T13:00:00", price: 10, start: "2018-08-19T11:00:00", title: "Energy"}
  2:{end: "2018-08-15T20:00:00", price: 10, start: "2018-08-15T17:00:00", title: "Trigonometry"}
  3:{end: "2018-08-25T11:00:00", price: 10, start: "2018-08-25T08:00:00", title: "Mechanics"}
  </code></pre>