Keynes Keynes - 6 months ago 39
Ajax Question

Fullcalendar: how to get events from two variables and pass to through 'eventAfterRender'?

I have the two types of events , namely 'holidays' and 'events', which should be received from two variables. The variables are holding the ajax responses. Now I want to pass the holidays and events to the calendar as 'events'. I do not know how to pass the variables. The following is my ajax code, which is declared to variable. Is my code correct?

var return_holidays = function() {
var holdays = [];
$.ajax({
url: "/calendar/show_holidays",
type: 'POST', // Send post data
data: 'type=fetch',
async: true,

success: function(s)
{
//alert(s);
holdays = s;
}
});
return holdays;
}();
var return_events = function() {
var dynamic_events = [];
$.ajax({
url: "calendar/show_events",
type: 'POST', // Send post data
data: 'type=fetch_events',
async: true,

success: function(s)
{//alert(s);
dynamic_events = s;
}
});
return dynamic_events;
}();


$('#calendar').fullCalendar({

utc: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true,
eventSources: [return_holidays, return_events],//am calling the variables
eventAfterRender: function(event, element, view) {
element.append(event.title);
}

});


Can i achieve in this way? Is this correct?

Answer

The return type of return_holidays, return_events should be JSON, so you could try returning JSON.stringify(yourArray); instead of a plain array. You could also try letting the calendar deal with the fetching business:

$('#calendar').fullCalendar({

    eventSources: [

        {
            url: '/calendar/show_holidays',
            type: 'POST',
            data: {
                'type' : 'fetch'
            },
            error: function() {
                alert('there was an error while fetching holidays!');
            },
        },
        {
            url: '/calendar/show_events',
            type: 'POST',
            data: {
                'type' : 'fetch_events'
            },
            error: function() {
                alert('there was an error while fetching events!');
            },
        }
    ]
});

http://fullcalendar.io/docs/event_data/events_json_feed/

Alternatively you can pass the urls directly to the calendar:

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

http://fullcalendar.io/docs/event_data/eventSources/

Always make sure that you are retuning objects in JSON format from your backend.

Comments