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

但是打字稿在上面一行显示错误。如果我这样做，那么我还想在添加事件后渲染日历。 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);
  }
}

Angular2 Full Calender动态添加事件

1 个答案: