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

Question

我有一个 Ionic 2 应用程序，它正在使用 fullcalendar。

我按照这些步骤在 Ionic 2 上使用它，效果非常好。

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

我有一个个人资料组件：

• 在

  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>

完整日历.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