用离子2添加全范围内的事件

Question

我有一个离子2应用，wich使用了fullcalendar。

我遵循以下步骤在离子2上使用它，并且效果很好。

，但是现在，我需要从包含此自定义组件的页面组件中以intaramine创建事件。

我有一个配置文件组件： - 在profile.ts中，我正在从firebase中检索每个用户的日期。 - 在profile.html中，我有此选择器：<full-calendar></full-calendar>

因此，在个人资料页面中，我可以看到日历，并且已经编辑了他们的样式。现在我想从此页面创建事件，但我不知道如何正确引用它。

我尝试了：

import { FullCalendarComponent } from .....
@Component({
....
    providers: [FullCalendarComponent]
})
.
.
.
FullCalendarComponent.calendarOptions.events = myEvents;

但是我看不到运行它的任何更改，并且控制台不会给我任何错误。

谢谢！

编辑：

在完整的日历组件（组件/全卡伦达）中：

full-calendar.html ：

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

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

这给我留下了：

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/85AFF341CD4A2049494910AB2C17E82777/EDIT