使用Ionic 2在全日曆中添加事件

Question

我有一個Ionic 2應用程序，至少使用的是fullcalendar。

我遵循這些steps在Ionic 2上使用它，它工作得很好。

但現在，我需要從包含此自定義組件的頁面組件中創建事件。

我有一個配置文件組件： - 在profile.ts，我正在從firebase中檢索每個用戶的日期。 - 在profile.html，我有這個選擇器：<full-calendar></full-calendar>

因此，在配置文件頁面中，我可以看到日曆，並且我已經編輯了他們的樣式。現在我想從這個頁面創建事件，但我不知道如何正確引用它。

我試着用：

import { FullCalendarComponent } from ..... 

@Component({ 
.... 
    providers: [FullCalendarComponent] 
}) 

. 
. 
. 
FullCalendarComponent.calendarOptions.events = myEvents; 

，但我看不到運行它的任何變化，和控制檯不投我的錯誤..

感謝這麼多提前！

EDIT：

在全歷組分（組分/全日曆）：

全calendar.html：

<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar> 

全calendar.ts ：

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

@Component({ 
    selector: 'full-calendar', 
    templateUrl: 'full-calendar.html' 
}) 
export class FullCalendarComponent { 

    calendarOptions: any = { // Before it was type : Object 
     //height: 'parent', 
     locale: 'es', 
     contentHeight: 'auto', 
     fixedWeekCount : false, 
     weekends: true,/** 
     defaultDate: '2017-01-03',*/ 
     editable: true, 
     eventLimit: true, // allow "more" link when too many events 
     defaultView: 'month', //basicWeek 
     allDaySlot: false, 
     minTime: '06:00:00', 
     maxTime: '23:00:00', 
     header: { 
      left: 'prev', 
      center: 'title', //'prev, title, next' 
      right: 'next' 
     }, 
     events: [ 
     { 
      title: 'All Day Event', 
      start: '2016-09-01' 
     }, 
     { 
      title: 'Long Event', 
      start: '2016-09-07', 
      end: '2016-09-10' 
     }] 
    } 
} 

在個人資料頁面組件（頁/輪廓）：

profile.html：（我有更多的代碼，但只顯示了重要的）

<div class="calendar"> 
    <full-calendar [options]="calOptions" #mycal></full-calendar> 
</div> 

profile.ts：

import { Component, ViewChild, ElementRef } from '@angular/core'; 
import { FullCalendarComponent } from '../../components/full-calendar/full-calendar'; 
import * as $ from 'jquery'; 


@Component({ 
    selector: 'page-profile', 
    templateUrl: 'profile.html', 
    providers: [FullCalendarComponent] 
}) 
export class ProfilePage { 
@ViewChild('mycal', { read: ElementRef }) myCal: ElementRef; 

calOptions: any = { 
    locale: 'es', 
    contentHeight: 'auto', 
    fixedWeekCount : false, 
    weekends: true,/** 
    defaultDate: '2017-01-03',*/ 
    editable: true, 
    eventLimit: true, // allow "more" link when too many events 
    defaultView: 'month', //basicWeek 
    allDaySlot: false, 
    minTime: '06:00:00', 
    maxTime: '23:00:00', 
    header: { 
     left: 'prev', 
     center: 'title', //'prev, title, next' 
     right: 'next' 
    }, 
    events: [] 
}; 

constructor(
    public navCtrl: NavController, 
    private alertCtrl: AlertController, 
    public platform: Platform, 
    public toastCtrl: ToastController, 
    private loadingCtrl: LoadingController, 
    public auth: FirebaseAuth 
) {} 

public setCalendarEvents(): void { 

    let events: Array<any> = []; 

    for (let entry of this.consecutiveDates) { 
     let event = { 
      allDay: true, 
      title: ' ', 
      start: entry 
     }; 

     events.push(event); 
    } 

    this.calOptions.events = events; 
    $(this.myCal.nativeElement).fullCalendar('addEventSource', events); 
} 

This throw throws：

Template parse errors: 
Can't bind to 'options' since it isn't a known property of 'full-calendar'. 
1. If 'full-calendar' is an Angular component and it has 'options' input, then verify that it is part of this module. 
2. If 'full-calendar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. 

Answer 1

.ts在某些時候不起作用。有人建議創建你自己的。

但這是我所做的。在.ts中創建一個elementRef。類變量

@ViewChild('mycal', { read: ElementRef }) myCal: ElementRef 
calOptions: any = {}; //options 

然後當你有要事說，從firebase，做以下。其中slots是您的events。在某些方法中。

this.calOptions.events = slots 
$(this.myCal.nativeElement).fullCalendar('addEventSource', slots) 

記住：slots是不是一個對象數組！

在HTML：

<full-calendar [options]="calOptions "#mycal></full-calendar> 

的更多信息：https://gist.github.com/shah-smit/85aff341cd4a20494910ab2c17e82777/edit