解决方案

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>

你能帮我解决我应该如何在fullcalendar页面上同时获得假期和动态事件..

Answer 1

解决方案

此代码：

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

正在初始化完整日历。因此，如果您的ajax调用在此代码之前完成（并且可能发生了什么），那么您将添加资源，然后通过初始化覆盖它们。因此，如果您将此代码移至ajax调用之前，它将起作用。

建议

您可以通过在初始化方法中直接设置eventSource来使代码更整洁。

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

然后你不需要将这2个ajax调用作为单独的代码。

请记住如果你想这样做，这个函数的返回值应该是事件数组（而不是json），并且方法应该是GET请求而不是POST，因为它现在就是。

希望这个帮助

Fullcalendar：'eventAfterRender'无法正常工作

1 个答案:

解决方案

建议