使用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