javascript - 全日历: '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，因为它就是现在。

希望对你有帮助