从服务中获取时，angular2 fullcalender事件不会更新。 HTTP [英] angular2 fullcalender events are not updated when fetched from service . Http

问题描述

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

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

  getCalendarOptions（）{
 
让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：
 {
议程：{eventLimit：2} 
}，
 eventClick :( calEvent，jsEvent，view）=> {
}，
 hiddenDays：[]，
 events：（start，end，timezone，callback）=> {// **这个地方的服务被调用来从服务器获取事件。** 
 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）; 
} 
  

但是事件并没有在完​​整的日历中更新。他们在点击其他日历视图后出现。
如何在事件可用后立即更新事件。 使用 callback 解决方案 c $ c>函数应该适用于您：



view.html



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

component.ts

 导出类应用程序{
 @ViewChild（CalendarComponent）myCalendar：CalendarComponent; 
 
 calendarOptions：any; 
 
构造函数（private appointmentService：CalendarService）{} 
 $ b 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 ，结束，时区，回叫）=> {
 this.appointmentService.getMonthEvents（）
 .subscribe（res => callback（res））; //只需调用回调函数
} 
}; 
} 
} 
  

Plunker示例

I'm using the fullcalendar in Angular4 with help of npm install ap-angular2-fullcalendar --save . The events which are hard coded in the component are instantly shown in the calendar. but when I fetch from service method i.e HTTP call. after receiving events I'm updating calendar events like

template : <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);
  }

But events are not getting updated in full calendar. They are appearing after clicking other calendar views. How to update events instantly after they are available.

解决方案

Using callback function should work for you:

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！