Full Calendar trigger ajax call before event renders on calendar


Staff member
I'm a bit lost where is the proper place to make this with the Full Calendar documentation and need some fiddle to point me into the right way. When my calendar loads the events, before them show up on the calendar, I need to make a ajax call into a wordpress db which should return a date of a post. Each post is an event on the calendar. Depending on the response of the database, if the post date is in future time than the current time, then the calendar should show this event in an specific color, if it is past or current time it should be another different specific color.

So basically, before each event renders on the calendar I need to trigger an ajax call for each of them and evaluate the data returned to apply them the right color for past/current events and future events.

Someone experienced with <a href="http://fullcalendar.io/" rel="nofollow">Full Calendar</a> could point me a fiddle with an example how is this done within the Full Calendar documentation?

This is the code I went so far. I am looking to stay in the loop with the calendar refetchEvents and be able to fetch with ajax in the background data from the posts of a WordPress website to use it on the next refetchEvents trigger and so on.

$(function () {
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();

  var webData = null; //array() data

    eventRender: function(event, element, webData) {
      var dataHoje = new Date();
        Use webData data taken with ajax on eventAfterAllRender callback option
        inside this conditional statements to draw on the event box
        colors and text values depending on the status and date of the post returned.
      if (event.start &lt; dataHoje &amp;&amp; event.end &gt; dataHoje) {
            element.css('background-color', '#FFB347');
            element.find('.fc-event-inner').append('&lt;span class="fc-event-status"&gt;ON AIR&lt;/span&gt;');
        } else if (event.start &lt; dataHoje &amp;&amp; event.end &lt; dataHoje) {
            element.css('background-color', '#77DD77');
            element.find('.fc-event-inner').append('&lt;span class="fc-event-status"&gt;Published&lt;/span&gt;');
        } else if (event.start &gt; dataHoje &amp;&amp; event.end &gt; dataHoje) {
            element.css('background-color', '#AEC6CF');
            element.find('.fc-event-inner').append('&lt;span class="fc-event-status"&gt;Schedued&lt;/span&gt;');
    eventAfterAllRender: function () {
    eventColor: '#378006',
    complete: function() {

    defaultView: 'basicDay',
    googleCalendarApiKey: 'AIzaSyCtEQZsFtsY41kJ1Av5FftgX9kdfkHKH',
    events: {
      googleCalendarId: '[email protected]om'
  header: {
      left: 'prev, next',
      center: 'title',
      right: 'basicDay, basicWeek, month, '
  lazyFetching: true,
  timeFormat: {
            agenda: 'h:mmt',    // 5:00 - 6:30
            '': 'h:mmt'         // 7p
        weekNumbers: false,
        lang: 'en',
        eventSources: [
          url: Routing.generate('fullcalendar_loader'),
          type: 'POST',
                data: {
                error: function() {


var refreshRate;

function reloadTime() {
  refreshRate = setTimeout(reloadPage, 5000);

function reloadPage() {

$( document ).ready(function() {