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。

希望这个帮助