从 service 获取 angular2 fullcalender 事件时不会更新。 Http答案

【问题标题】：angular2 fullcalender events are not updated when fetched from service . Http从 service 获取 angular2 fullcalender 事件时不会更新。 Http
【发布时间】：2017-05-24 05:47:31
【问题描述】：

我在 npm install ap-angular2-fullcalendar --save 的帮助下在 Angular4 中使用 fullcalendar。在组件中硬编码的事件会立即显示在日历中。但是当我从服务方法（即 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);
  }

但活动并未在完整日历中更新。它们在单击其他日历视图后出现。如何在事件可用后立即更新事件。

【问题讨论】：

您可能需要在模板中使用 elvis 运算符，因为它是一个 http 调用，并且可能需要一段时间才能像 calendar?.events 那样接收
我的模板是：{{options | json}}> getCalendarOptions() 返回 calendarOptions
你能在问题而不是评论中更新它吗
不要在模板中使用getCalendarOptions()。创建一次。你总是返回新对象。并且在每个更改检测滴答时都会执行此方法。创建属性options并在ngOnInit中初始化
但我想从服务器加载事件，而不是硬编码事件。是的，我想根据日期检测每个刻度并加载事件。

标签： jquery angular fullcalendar

【解决方案1】：

使用callback 函数应该适合你：

view.html

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

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

Plunker Example

【讨论】：

谢谢，我忘记使用回调了。
当我以这种方式设置日历呈现但日期没有