選択した日付のイベントとリソースをフルカレンダーで動的にロードする方法

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とリソースを呼び出します。