Fullcalendar: 'eventAfterRender' is not working correctly

Question

I have written my code to render the holidays and dynamic events through the fullCalendar. From My code, I have received the events through the 'eventAfterRender' for the first ajax call. But i did not receive the events for the second ajax call. can anyone help me in.. The following is my script:-

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

Can you help me how should i get both holidays and dynamic events to the fullcalendar page..

Answer 1

Solution

This code:

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

is initializing the full calendar. So if your ajax calls finish before this code (and that's probably what happens) so you'll add the resources but then you override them with the initialization. So if you'll move this code to be before the ajax call it will work.

---

Suggestion

You can make the code neater by setting the eventSources directly in the initialization method.

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

And then you don't need this 2 ajax calls as separate code.

Keep in mind that if you want to do it, the return value of this functions should be array of events (and not json), and the methods should be GET requests and not POST as it is right now.

Hope this help