如何使用angular在fullcalendar中为选定日期动态加载事件和资源

Question

我想从本地json文件加载选定日期的事件和资源数据。

点击日期，我通过服务调用获取我的本地json数据，并将这些数据推送到事件数组和资源数组。

但我无法在日历上看到事件和资源。

这里是将dayViewOption对象传递给日历组件。

dayViewOptions = {
      resourceAreaWidth:'334px',
      refetchResourcesOnNavigate:true,
      now: '2017-12-25',
      refetchEvents:true,
      editable: true,
      height: 580,
      header: {
        left: '',
        center: '',
        right: ''
      },
      slotLabelFormat:['H'],
      defaultView: 'timelineDay',
      slotWidth:15,
      resourceColumns: [
        {
            labelText: '',
            field: 'title'
        }
      ],
      resources: [

      ],
      events: [

      ]
  }

这是我的角度开发的日历组件。

<camp-day-view-calendar [options]="dayViewOptions"></camp-day-view-calendar>

每当选择日期时，我都会调用gotToDay函数来格式化数据，推送数据并导航到所选日期。

goToDay(dayData){
    let year = dayData.getFullYear();
    let month = dayData.getMonth()+1 < 10 ? `0${dayData.getMonth()+1}` : dayData.getMonth()+1;
    let day = dayData.getDate() < 10 ? `0${dayData.getDate()}` : dayData.getDate();
    let currentDate = `${year}-${month}-${day}`;    
    this.calendarService.getCalendarDetails(currentDate)
      .subscribe(
        success => {
          this.response = success;
          this.formatDayViewOptions(success);          
            $('camp-day-view-calendar').fullCalendar('gotoDate',currentDate);
        },
        error =>{
          console.log(error);
        }
      );
  }



  formatDayViewOptions(res){
    this.dayViewOptions.resources = [];
    this.dayViewOptions.events = [];
    let calnderDetails = res.data;
    let dataLength = res.data.length;    
    for(let i = 0; i < dataLength ; i++){
      let dayColor = this.dayViewColors[Math.floor(Math.random()*4)];
      let deploymentObj = calnderDetails[i].deployment;
      let resourceObj = {"id": deploymentObj.id, "title": deploymentObj.name,"channelName":deploymentObj.channel, "eventColor": dayColor };
      this.dayViewOptions.resources.push(resourceObj);

      let resouceEventObj = { "id": deploymentObj.id, "resourceId": deploymentObj.id, "start": deploymentObj.calendar.startDate, "end": deploymentObj.calendar.endDate }
      this.dayViewOptions.events.push(resouceEventObj);
    }    
    $('camp-day-view-calendar').fullCalendar("updateEvents",this.dayViewOptions.events);
  }

这是示例本地json数据

{
    "data":[
        {
        "deployment": {
          "id": "a",
          "name": "Ev1234567890123...Ev12345678903_1",          
          "calendar": {
            "id": 0,
            "name": "string",
            "startDate": "2017-12-06",
            "endDate": "2017-12-08"
          },          
          "channel": "SMS"
        }
      }
    ]
}

有人，请帮帮我。提前致谢。

Answer 1

作为功​​能的事件和资源应该有助于此。在调用fullCalendar（'refetchEvents'）和fullCalendar（'refetchResources'）时将调用这些函数。在接收来自api调用的数据时调用此refetchEvents和资源。