обновить angular2-fullcalendar после ngAfterViewInit

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 Добавьте приведенный ниже фрагмент в конце раздела map.

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

Я прикрепил файл ниже только для справки.

4: Откройте app.module.ts импорт CalendarComponent из angular2-fullcalendar

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>

In 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

Если вы посмотрите на реализация этого npm вы увидите, что он очень простой. Я бы посоветовал обернуть полный календарь в свой собственный 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);
    }
}