Question

我在 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);
  }

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

Answer 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

从服务中获取时，不会更新angular2 fullcalender事件。 HTTP

1 个答案: