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

但我看不到运行它的任何更改，控制台也不会向我抛出任何错误..

提前致谢！

编辑：

在全日历组件（components/full-calendar）中：

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/85aff341cd4a20494910ab2c17e82777/edit