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;

但是我无法看到任何更改，并且控制台不会给我任何错误..

提前感谢！

修改：

在完整日历组件（组件/完整日历）中：

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

这引起了我的注意：

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

使用Ionic 2在全日历中添加活动

1 个答案: