Code Demon Code Demon - 4 months ago 76
jQuery Question

Render JSON events on full calendar

I'm trying to render events on the fullcalendar from the json response,

$.ajax({
url : $("body").attr("data-link")+'/calendar/events',
type : 'post',
dataType: 'json',
success: function(e){
if(e.success){
var events = [];
$.each(e.events,function(index,value){
events.push({
title : value.title,
start : moment(value.start_date).format('YYYY-MM-DD'),
end : moment(value.end_date).format('YYYY-MM-DD'),
});
});
calendar.fullCalendar( 'renderEvent', events , true);
console.log(events);
}
}
});


here's my fullcalendar set up

var calendar = $('#calendar').fullCalendar({
customButtons: {
myCustomButton: {
text: 'Add Event',
click: function() {

}
}
},
header: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable : false,
eventLimit: true,
eventClick: function(calEvent, jsEvent, view, element) {
},
eventRender: function(event, element) {
element.attr("data-id",event.id);
},

});


In the console log.

enter image description here

and then it gives me this error,


Uncaught TypeError: Cannot read property 'hasTime' of undefined


any ideas, help please?

Answer

You could either call renderEvent for each event in events or add entire array as datasource

$.ajax({
        url : $("body").attr("data-link")+'/calendar/events',
        type : 'post',
        dataType: 'json',
        success: function(e){
            if(e.success){
                var events = [];
                $.each(e.events,function(index,value){
                    events.push({
                        title : value.title,
                        start : moment(value.start_date).format('YYYY-MM-DD'),
                        end : moment(value.end_date).format('YYYY-MM-DD'),
                    });
                });
                calendar.fullCalendar( 'addEventSource', events);
            }
        }
    });