从服务中获取 Angular2 全日历事件时不会更新.呵呵

Question

我在 npm 的帮助下在 Angular4 中使用完整日历安装 ap-angular2-fullcalendar --save .在组件中硬编码的事件会立即显示在日历中。但是当我从服务方法(即 HTTP 调用(获取时。收到事件后，我正在更新日历事件，例如

模板 ： <angular2-fullcalendar [options]=getCalendarOptions()>{{options | json}}></angular2-fullcalendar>

 getCalendarOptions() {
    let calendarOptions = {
      header:
      {
        left: '',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,today,listYear prev,next '
      },
      dayClick: (date, jsEvent, view) => {
      },
      slotDuration: '00:20:00',
      color: '#456778',
      height: 650,
      defaultView: 'agendaDay',
      slotLabelFormat: 'h(:mm)a',
      businessHours: {
        start: '11:00',
        end: '12:00',
        dow: [1, 2, 3, 4, 5]
      },
      minTime: "09:00:00",
      maxTime: "20:00:00",
      fixedWeekCount: false,
      defaultDate: new Date(),
      editable: true,
      eventLimit: true,
      selectable: true,
      nowIndicator :true,
      selectHelper: true,
      viewRender:( view, element )=>{
        console.log("ViewRender: "+view.start +" ele:" +view.end)
      },
      select: (start, end, allDay) => {
      },
      views:
      {
        agenda: { eventLimit: 2 }
      },
      eventClick: (calEvent, jsEvent, view) => {
         },
      hiddenDays: [],
      events: (start, end, timezone, callback)=>{ //**This place Service is being called to fetch events from server.**
       this.appointmentService.getMonthEvents(start,end,'view').subscribe(
       res=>{
          this.events=res   
       // this.myCalendar.fullCalendar('refetchEventSources', this.events);
        this.myCalendar.fullCalendar('renderEvents', this.events, 'stick')
          console.log("Cal")}
     )
      }
    };
    return (calendarOptions);
  }

但是事件不会在完整的日历中更新。它们在单击其他日历视图后显示。如何在事件可用后立即更新事件。

Answer 1

使用callback函数应该适合您：

查看.html

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

组件.ts

export class App {
  @ViewChild(CalendarComponent) myCalendar: CalendarComponent;
  calendarOptions: any;
  constructor(private appointmentService: CalendarService) {}
  ngOnInit() {
    this.calendarOptions =  {
      height: '1000',
      fixedWeekCount : false,
      header:
        {
          left: '',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,today,listYear prev,next '
        },
      defaultDate: '2016-09-12',
      editable: true,
      eventLimit: true,
      events: (start, end, timezone, callback)=> {
        this.appointmentService.getMonthEvents()
          .subscribe(res => callback(res)); // just call callback
      }
    };
  }
}

普伦克示例