Angular2 Full Calender動態添加事件

Question

我想動態添加日曆事件。目前我正在使用angular2-fullcalender包。

calender.ts

calendarOptions: Object = { 
    editable: false, 
    eventLimit: true, 
    header: { 
     left: 'title', 
     center: 'month,agendaWeek,agendaDay', 
     right: 'prev,next,today' 
    }, 
    defaultDate: new Date(), 
    selectable: false, 
    selectHelper: false, 
    views: { 
     month: { // name of view 
     titleFormat: 'MMMM YYYY' 
     // other view-specific options here 
     }, 
     week: { 
     titleFormat: " MMMM D YYYY" 
     }, 
     day: { 
     titleFormat: 'D MMM, YYYY' 
     } 
    }, 
    events: [] 
    }; 

我曾嘗試下面的代碼，添加事件從服務響應壓延。

// call to the backend service 
getEvents() { 
    events = backend.events; 
    this.calendarOptions.events = events; 
} 

但typescript在上面的行顯示錯誤。如果我這樣做，那麼一旦添加事件，我也想渲染日曆。 SO上顯示的所有其他答案都是關於angular1.5而不是angular2。

更新：

我已經嘗試了所有下面給出的可用選項。但沒有人工作。

addEvents() { 
    let myCalendar: any = jQuery('angular2-fullcalendar'); 
    myCalendar.fullCalendar(); 
    myCalendar.fullCalendar('removeEvents'); 
    for (let event of this.events) { 
     myCalendar.fullCalendar('renderEvent', event, true); 
    } 
    // jQuery('angular2-fullcalendar').fullCalendar('addEventSource', this.events); 

    // jQuery('angular2-fullcalendar').fullCalendar('renderEvents'); 
    } 

Answer 1

我看不到該包中的任何方法來渲染新事件。

我認爲你必須發瘋，並使用角內jQuery，你應該避免。

getEvents() { 
    events = backend.events; 
    this.calendarOptions.events = events; 
    $('#myCalendar').fullCalendar('renderEvents', events, true); 
} 

https://fullcalendar.io/docs/event_rendering/renderEvents/

更新/編輯

好了，所以我創建了角CLI一個新的項目只是爲了測試。這就是我一定要得到它的工作

模板

<angular2-fullcalendar id="myCalendar" [options]="calendarOptions"></angular2-fullcalendar> 

組件

import { Component } from '@angular/core'; 

import * as $ from 'jquery'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'] 
}) 
export class AppComponent { 

    calendarOptions = { 
    height: 'auto', 
    contentHeight: 'auto', 
    fixedWeekCount: false, 
    editable: true, 
    eventLimit: true, 
    defaultView: 'agendaWeek', 
    slotDuration: '01:00:00', 
    firstDay: 1, 
    header: { 
     right: 'today prev,next' 
    }, 
    events: [ 
    ] 
    }; 

    constructor() { 

    } 

    ngOnInit() { 
    let newEvents = [ 
     { 
     id: 1, 
     title: 'name a', 
     start: '2017-02-20T09:00', 
     end: '2017-02-20T11:00' 
     }, 
     { 
     id: 2, 
     title: 'name b', 
     start: '2017-02-20T12:00', 
     end: '2017-02-20T13:00' 
     }, 
     { 
     id: 3, 
     title: 'name c', 
     start: '2017-02-20T14:00', 
     end: '2017-02-20T16:00' 
     }, 
     { 
     id: 4, 
     title: 'name d', 
     start: '2017-02-20T18:00', 
     end: '2017-02-20T23:00' 
     } 
    ]; 
    this.calendarOptions.events = newEvents; 
    $('#myCalendar').fullCalendar('renderEvents', newEvents, true); 
    } 
}