如何在fullcalendar中解析json格式的事件？

我有一個下面列出的完整日曆腳本。每件事情都很好。我以JSON格式從控制器返回存儲在數據庫中的事件。現在json數據的格式稍微改變了，我無法解析在日曆中顯示事件。以下是我的劇本;如何在fullcalendar中解析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" 
}] 
}

來源

2017-09-13 Bishal Jung Chettri

檢查是什麼'info'以前的工作數據使用'console.log'，你可能需要編寫'信息的價值迴歸。數據「，以獲得新的數據集相同 – Se0ng11

對不起，造成混亂。我只是在那裏複製了我的所有劇本。請忽略'eventDrop'下面的代碼。問題是，新的一組數據沒有在事件日曆中從這種方法解析事件：{{route（'event_calendar.data'）}}「 }，' –

能夠創建示例jsfiddle輕鬆排除故障？ – Se0ng11

這可能是一個更好的選擇，讓你的源返回格式正確的數據，但如果由於某種原因，你不能做到這一點，你可以在Javascript中做到這一點。

The Fullcalendar docs describe您可以在您的事件源中傳遞正常的$.ajax選項。所以你可以指定一個成功的回調函數，它以你需要的格式返回數據。

我與您的數據在本地嘗試這樣做，它的工作原理：

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

來源

2017-09-13 10:46:20

如何在fullcalendar中解析json格式的事件？

回答

相關問題