I've been experimenting with FullCalendar for some time now, but I'm facing a minor issue. When I load events through AJAX/JSON in the correct format, the calendar only displays the first event.
Although all other events are visible in the console.log output, they do not appear on the calendar. The sample event code from the documentation looks like this:
events: [{
title: 'My Event',
start: '2010-01-01',
url: 'http://google.com/'
},
{
title: 'My Event',
start: '2010-01-02',
url: 'http://google.com/'
}
// other events here
],
Here's my code snippet:
events: function(start, end, timezone, callback) {
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$.ajax({
url: "/tande/fetch_holidays/",
type: 'POST',
success: function(data) {
var events = [];
$.map(data.holidays, function(value) {
console.log(value)
description = value.toString().split('_')[0]
start_date = value.toString().split('_')[1]
end_date = value.toString().split('_')[2]
person = value.toString().split('_')[3]
events.push({
title: person,
start: start_date,
end: end_date
});
callback(events);
console.log(events);
})
},
})
},