각도를 사용하여 선택한 날짜에 이벤트 및 리소스를 동적으로 전체 일정으로로드하는 방법

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: [ 

     ] 
    } 

이것은 내 일정으로 개발 된 캘린더 구성 요소입니다. 날짜를 선택할 때마다, 데이터 포맷의 데이터를 밀고 선택한 날짜로 이동을 위해 gotToDay 기능을 다음과 같은 호출 오전

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

. 여기

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 및 자원을 호출하십시오.