update angular2-fullcalendar after ngAfterViewInit

问题

Alright, this is something new and I haven't got it answered in any threads related to angular2-fullcalendar.

I am able to compile what is said and written on this documentation of angular2-fullcalendar

Problem occurs when i am trying to populate calendar with my events, after the view has been initialised.

Scenario 1:

1. View Loads
2. Shows Calendar
3. Events are displayed(hard-coded)

Scenario 2:

1. View Loads
2. Shows Calendar
3. getting records(from server)
4. Asked angular2-fullcalender to update my view.
5. No error, nor the events are displayed.

HTML:

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

Working example: Scenario 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;
}

Not working example: Scenario 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.
    }

回答1:

1: NPM Install

npm install fullcalendar

npm i angular2-fullcalendar

npm install jquery

npm install moment

2: Remove angular2-fullcalendar from node_modules and place it under app folder

3: Open Systemjs.config.js Add the below snippet end map section.

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

I have attached the file below for reference purpose only.

4: Open app.module.ts import CalendarComponent from angular2-fullcalendar

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

Add the CalendarComponent to declarations array.

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

5 Now its time to display the calendar. Pick your own component. For example, I will take 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

Import the 3 things, now u see the importance the systemjs.config.js that we did earlier. Contniue with booking.component.ts in the class,

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

From the step 5 beginning, there is #mycal in the html, that is 'mycal' in the above statment.

calOptions: any = {};

Initialising the calOptions to be empty, remember not null.

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

In the above, in constructor we have some events to be displayed, we are calling updateCalendar to update the events.

More references to this: https://gist.github.com/shah-smit/85aff341cd4a20494910ab2c17e82777/edit

回答2:

If you look at the implementation of that npm package you will see it is very basic. I would advise wrapping full calendar in your own Typescript, and handling the FullCalendar events and entry points yourself, that way you can take advantage of the entire API.

The component below is one I have used with success, that uses 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);
    }
}

来源：https://stackoverflow.com/questions/42473743/update-angular2-fullcalendar-after-ngafterviewinit