CLNDR.js and loading Events via AJAX not working

Question

I am trying to use CLNDR.js to display Events on my page. As per the examples the Calendar should be called like this:

$(document).ready( function() {

    var eventArray = [
        { date: '2014-04-25', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' },
        { date: '2014-04-26', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' },
        { date: '2014-04-27', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' },
        { date: '2014-04-28', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' },
        { date: '2014-04-29', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' },
        { date: '2014-05-29', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' }
    ];


    $('#calendar').clndr({
        template: $('#template-calendar').html(),
        events: eventArray,
        startWithMonth: moment(),
    });

 });

This works on my page, with static events.

But when I try to load the events via AJAX it doesn't work. Here is the code: var cal;

$(document).ready(function() {

    if(!$('#calendar').length)
        return;

    if(!$('#calendar').data('calendar'))
        return;

    if(!$('#calendar').data('token'))
        return;

    httpParams = {
                    category: $('#calendar').data('calendar'), 
                    csrf_token: $('#calendar').data('token')
                };

    calendarEvents = [];

    $.ajax({
        method: "POST",
        dataType: "json",
        url: '/api/calendar',
        data: httpParams,
        success: function(data) {
            $.each(data, function(key, event) {

                var item = {"date" : moment(event.event_date).format('YYYY-MM-DD'), "title" : event.title, "description" : event.event_text};

                calendarEvents.push(item);  
            });
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });


    $('#calendar').empty();

    cal = $('#calendar').clndr({

        template: $('#template-calendar').html(),
        events: calendarEvents, //The events doesn't get populated in the cal.eventsThisMonth, cal.eventsNextMonth and  cal.eventsLastMonth ???
        startWithMonth: moment(),
    });
});

Here is a screenshot of the AJAX Response: https://www.dropbox.com/s/h5r57b5p4vt6vzr/ajax_response.JPG

And this is the calerdarEvents array: https://www.dropbox.com/s/t4hlt3wq39oehgr/calendarEventsArray.JPG

I don't know what is the problem?

Answer 1

Your calendar gets rendered before the asynchronous ajax call is complete.

You should call $('#calendar').clndr() inside your success block, after the $.each statement.

Or better yet, add your calendar before the ajax call and use the .addEvents() api method.