Fullcalendar：“ eventAfterRender”無法正常工作

Question

我已經編寫了代碼，以通過fullCalendar呈現假期和動態事件。 從我的代碼中，我已經通過“ eventAfterRender”收到了第一個ajax調用的事件。 但是我沒有收到第二次ajax調用的事件。 任何人都可以幫助我。以下是我的腳本：-

$(document).ready(function() {
$.ajax({
        url: "calendar/show_holidays",
        type: 'POST', // Send post data
        data: 'type=fetch',
        async: true,

        success: function(s){

             holidays =s;
             // holidays = '['+s+']';

              $('#calendar').fullCalendar('addEventSource', JSON.parse(holidays));

              }
    });
$.ajax({
        url: "calendar/show_events",
        type: 'POST', // Send post data
        data: 'type=fetch_events',
        async: true,

        success: function(s){

             dynamic_events =s;
                       //alert(dynamic_events);
              $('#calendar').fullCalendar('addEventSource', JSON.parse(dynamic_events));

              }
    });    
$('#calendar').fullCalendar({
 eventAfterRender: function(event, element, view) { 
element.append(event.title); 
} 
});
<style>
.event-full { 
color: #fff; 
 vertical-align: middle !important;
text-align: center; 
opacity: 1; 
}

</style>

您能幫我把假期和動態事件帶到全日歷頁面嗎？

Answer 1

解

這段代碼：

$('#calendar').fullCalendar({
 eventAfterRender: function(event, element, view) { 
     element.append(event.title); 
   } 
});

正在初始化整個日歷。 因此，如果您的ajax調用在此代碼之前完成（可能就是這種情況），那么您將添加資源，但隨后使用初始化覆蓋它們。 因此，如果將這段代碼移到ajax調用之前，它將起作用。

---

建議

您可以通過直接在初始化方法中設置eventSources來使代碼更整潔。

$('#calendar').fullCalendar({
  eventSources: [
    '/calendar/show_events',
    '/calendar/show_holidays'
    ],
});

然后，您不需要將此2個ajax調用作為單獨的代碼。

請記住 ，如果要執行此操作，則此函數的返回值應該是事件數組（而不是json），並且方法應該是GET請求而不是POST。

希望這個幫助