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

おそらくあなたのソースリターン適切な形式のデータを持っている良いオプションですが、いくつかの理由のためにあなたがそれを行うことができない場合は、JavaScriptでそれを行うことができます。

The Fullcalendar docs describe通常の$.ajaxオプションをイベントソースに渡すことができます。したがって、必要な形式でデータを返す成功コールバックを指定することができます。私はローカルにデータでこれを試してみましたが、それが動作

： `console.log`を使用して、以前の作業データで` info`の値のリターンが何であるかを

$('#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