fullcalendar에서 json 형식으로 이벤트를 구문 분석하는 방법은 무엇입니까?

Question

아래에 나열된 전체 일정에 대한 스크립트가 있습니다. 모든 것이 잘 작동합니다. JSON 형식의 컨트롤러에서 데이터베이스에 저장된 이벤트를 반환했습니다. 이제 json 데이터의 형식이 약간 변경되었으므로 달력에서 이벤트를 구문 분석 할 수 없습니다. 다음은 제 스크립트입니다.

$('#calendar').fullCalendar({ 
     editable: true, 
     events: { 
      url: "{{ route('event_calendar.data') }}" 
     }, 

     eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) { 
      var data = event.title; 
      var start = event.start.format(); 
      var end = event.end.format(); 
      var csrf= "{{csrf_token()}}" 
      $.post("{{ route('event_update') }}",{title: data, start: start, end: end, _token: csrf}, function (info) { $("#result").html(info); }); 
     }, 

     header: { 
      center: 'month,thisWeek' // buttons for switching between views 
     }, 

     views: { 
      thisWeek: { 
       type: 'agenda', 
       duration: { week: 1 }, 
       buttonText: 'This week' 
      } 
     } 

}); 

이 URL의 즉 {{ route('event_calendar.data') }}

[{ 
"id": 9, 
"title": "Event 1", 
"color": "#af2e0e", 
"start": "2017-09-18", 
"end": "2017-09-20" 
}, { 
"id": 10, 
"title": "Event 2", 
"color": "#0b7c0d", 
"start": "2017-09-04", 
"end": "0000-00-00" 
}, { 
"id": 11, 
"title": "Event 3", 
"color": "#378006", 
"start": "2017-09-10", 
"end": "2017-09-12" 
}, { 
"id": 13, 
"title": "Publication", 
"color": "#378006", 
"start": "2017-09-15", 
"end": "2017-09-16" 
}, { 
"id": 14, 
"title": "other", 
"color": "#378006", 
"start": "2017-09-05", 
"end": "2017-09-06" 
}, { 
"id": 18, 
"title": "other", 
"color": "#378006", 
"start": "2017-09-18", 
"end": "2017-09-19" 
}, { 
"id": 19, 
"title": "Apple", 
"color": "#378006", 
"start": "2017-09-08", 
"end": "2017-09-09" 
}, { 
"id": 20, 
"title": "Developer", 
"color": "#378006", 
"start": "0000-00-00", 
"end": "0000-00-00" 
}, { 
"id": 21, 
"title": "New event", 
"color": "#af2e0e", 
"start": "2017-09-28", 
"end": "2017-09-30" 
}, { 
"id": 22, 
"title": "asdasd", 
"color": "#0b7c0d", 
"start": "2017-08-28", 
"end": "2017-08-31" 
}] 

이 같은 URL에서 획득 한 나의 새로운 JSON 데이터입니다로부터 획득 JSON 형식으로 내 이전 데이터입니다. 이제 알 수 있듯이 달력에 표시되지 않은 주요 이벤트에 추가 된 '데이터'가 있습니다. 이 양식을 구문 분석하여 일정에 이벤트를 표시하려면 어떻게해야합니까?

{ 
"data": [{ 
    "id": 9, 
    "title": "Event 1", 
    "color": "#af2e0e", 
    "start": "2017-09-18", 
    "end": "2017-09-20" 
}, { 
    "id": 10, 
    "title": "Event 2", 
    "color": "#0b7c0d", 
    "start": "2017-09-04", 
    "end": "0000-00-00" 
}, { 
    "id": 11, 
    "title": "Event 3", 
    "color": "#378006", 
    "start": "2017-09-10", 
    "end": "2017-09-12" 
}, { 
    "id": 13, 
    "title": "Publication", 
    "color": "#378006", 
    "start": "2017-09-15", 
    "end": "2017-09-16" 
}, { 
    "id": 14, 
    "title": "other", 
    "color": "#378006", 
    "start": "2017-09-05", 
    "end": "2017-09-06" 
}, { 
    "id": 18, 
    "title": "other", 
    "color": "#378006", 
    "start": "2017-09-18", 
    "end": "2017-09-19" 
}, { 
    "id": 19, 
    "title": "Apple", 
    "color": "#378006", 
    "start": "2017-09-08", 
    "end": "2017-09-09" 
}, { 
    "id": 20, 
    "title": "Developer", 
    "color": "#378006", 
    "start": "0000-00-00", 
    "end": "0000-00-00" 
}, { 
    "id": 21, 
    "title": "New event", 
    "color": "#af2e0e", 
    "start": "2017-09-28", 
    "end": "2017-09-30" 
}, { 
    "id": 22, 
    "title": "asdasd", 
    "color": "#0b7c0d", 
    "start": "2017-08-28", 
    "end": "2017-08-31" 
}] 
} 

Answer 1

아마 당신의 소스 반환에게 올바른 형식의 데이터를 가지고 더 나은 옵션이지만, 어떤 이유로 당신이 그렇게 할 수없는 경우, 당신은 자바 스크립트에 그것을 할 수 있습니다.

The Fullcalendar docs describe 당신은 이벤트 소스에 보통 $.ajax 옵션을 전달할 수 있습니다. 따라서 필요한 형식으로 데이터를 반환하는 성공 콜백을 지정할 수 있습니다.

나는 로컬 데이터와이 시도하고 그것은 작동 :`이전 작업 데이터 info`, 당신은`정보를 작성해야 할 수도 있습니다`console.log`를 사용하여 값 반환 무엇

$('#calendar').fullCalendar({ 
    // ... your code 
    events: { 
     url: "{{ route('event_calendar.data') }}", 
     success: function(response) { 
      // Instead of returning the raw response, return only the data 
      // element Fullcalendar wants 
      return response.data; 
     } 
    }, 
    // ... rest of your Fullcalendar code