在 ngAfterViewInit 之后更新 angular2-fullcalendar

Question

好的，这是新事物，我还没有在任何与 angular2-fullcalendar 相关的线程中得到答案。

我能够编译angular2-fullcalendar 的文档中所说和所写的内容

在视图初始化后，当我尝试用我的事件填充日历时出现问题。

场景一：

1. 查看负载
2. 显示日历
3. 显示事件（硬编码）

场景 2：

1. 查看负载
2. 显示日历
3. 获取记录（从服务器）
4. 要求 angular2-fullcalender 更新我的视图。
5. 没有错误，也没有显示事件。

HTML：

<angular2-fullcalendar [options]="some" id="mycal" #mycal></angular2-fullcalendar>

工作示例：场景 1

event: any[] = 
          [{
            title: 'Long Event',
            start: '2017-02-21',
            end: '2017-02-22'
          },{
            title: 'Long Event',
            start: '2017-02-16T16:00:00',
            end: '2017-02-17'
          }];
calOptions: Options = {};
ngOnInit() 
{
 this.some.events = this.event;
}

不工作示例：场景 2

event: any[] = 
          [{
            title: 'Long Event',
            start: '2017-02-21',
            end: '2017-02-22'
          },{
            title: 'Long Event',
            start: '2017-02-16T16:00:00',
            end: '2017-02-17'
          }];
ngOnInit() { this.getBookings(); }

getBookings() {

        this._service.getEvents().subscribe(values => {

this.updateCalendar();

}, () => console.log('error'))

updateCalendar()
    {
this.calOptions.events = this.event;
      //$(this.element.nativeElement).fullCalendar('updateEvents',this.event) //I tried doing the query way too, but it failed.
    }

Answer 1

1：NPM 安装

npm install fullcalendar

npm i angular2-fullcalendar

npm install jquery

npm install moment

2：将angular2-fullcalendar从node_modules中删除，放到app文件夹下

3: 打开Systemjs.config.js 添加下面的sn-p end map 部分。

'moment': 'npm:moment',
'jquery':'npm:jquery/dist/jquery.js',
'fullcalendar':'npm:fullcalendar/dist/fullcalendar.js'

我附上以下文件仅供参考。

4: 打开app.module.ts 从angular2-fullcalendar 导入CalendarComponent

import { CalendarComponent } from './angular2-fullcalendar/src/calendar/calendar';

将CalendarComponent 添加到声明数组中。

@NgModule({
  imports: [...],
  declarations: [
    CalendarComponent
  ],
  providers: [...],
  bootstrap: [...]
})

5 现在该显示日历了。选择您自己的组件。比如我会取booking.component.html

<angular2-fullcalendar [options]="calOptions" id="mycal" #mycal></angular2-fullcalendar>

在booking.component.ts

import { Options } from 'fullcalendar'
import * as $ from 'jquery';
import * as moment from "moment

导入这 3 个东西，现在你看到了我们之前所做的 systemjs.config.js 的重要性。 在课堂上继续booking.component.ts，

@ViewChild('mycal', { read: ElementRef }) myCal: ElementRef;

从第5步开始，html中有#mycal，即上面语句中的'mycal'。

calOptions: any = {};

初始化 calOptions 为空，记住不要为空。

Contructor()
{
var events = [ {
          title: 'All Day Event',
          start: '2016-09-01'
        },
        {
          title: 'Long Event',
          start: '2016-09-07',
          end: '2016-09-10'
        }];
this.UpdateCalendar(events);
}

UpdateCalendar(events)
{
this.calOptions.events = events
$(this.myCal.nativeElement).fullCalendar('addEventSource', events)
}

在上面的构造函数中，我们有一些要显示的事件，我们正在调用 updateCalendar 来更新事件。

更多参考：https://gist.github.com/shah-smit/85aff341cd4a20494910ab2c17e82777/edit

Answer 2

如果您查看该 npm 包的 implementation，您会发现它非常基础。我建议将完整的日历包装在您自己的 Typescript 中，并自己处理 FullCalendar 事件和入口点，这样您就可以利用整个 API。

下面的组件是我成功使用的一个，它使用了 JQuery。

import { Component, ViewContainerRef, Input, Output, EventEmitter } from '@angular/core';
import { Overlay } from 'angular2-modal'; 
import * as $ from 'jquery';
import 'fullcalendar';
import { Options } from 'fullcalendar';
import _ from 'lodash';

export interface IEvent {
    title: string;
    description: string;
    start: Date;
    end: Date;
    type: string;
    backgroundColor: string;
    textColor: string;
    className: string;
    borderColor: string;
}

declare var jQuery: any;

@Component({
    selector: 'calendar',
    template: `<div id='calendar'></div>`
})
export class CalendarComponent {

    @Input('height')
    public height: number;

    @Output('event-click')
    eventClick = new EventEmitter();

    @Output('month-changed')
    monthChanged = new EventEmitter();

    @Output('date-change')
    dateChange = new EventEmitter();

    calElement = null;

    addEvents(events: IEvent[]) {
        this.calElement = $('#calendar');
        if (!_.isNil(events)) {
            $('#calendar').fullCalendar('addEventSource', events);
        }
    }

    getCurrentMonth() {
        const currentdate = <any>$("#calendar").fullCalendar('getDate');
        return currentdate.month();
    }


    ngOnInit() {
        this.calElement = $('#calendar');
        let clickFunc = function (calEvent, jsEvent, view) {
            this.eventClick.emit(calEvent);
        };

        let eventRender = function (event, element) {
            const args = {event: event, view: element};
            this.dateChange.emit(args);
        };

         let viewRender = function (view, element) {
            this.monthChanged.emit(view.intervalStart.month());
        };

        let boundRender = eventRender.bind(this);
        let boundClick = clickFunc.bind(this);
        let boundView = viewRender.bind(this);

        let options: any = {
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay listMonth,listWeek,listDay'
            },

            defaultView: 'month',
            aspectRatio: 1,
            eventRender: boundRender,
            eventClick: boundClick,
            viewRender: boundView
        };

        if (this.height > 0) {
            options.height = this.height;
        }

        this.calElement.fullCalendar(options);
    }
}