I have a problem with fullcalendar v4, I try to load the data through ajax, but the events are not displayed and it does not throw me any error.
in v3 of fullcalendar I had no problems, but in v4 I can't manage to do it.
in my controller function I create an array with the necessary data to load the events.
the events were sent to the database with the format provided by carbontoIso8601String
fullcalendar script code
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid','timeGrid', 'interaction', 'list' ],
height: 800,
header: {
left: 'prev,today,next',
center: 'title',
right: 'dayGridMonth,timeGridWeek,listMonth'
},
buttonText: {
today: 'Hoy',
month: 'Mes',
agendaWeek: 'Semana',
agendaDay: 'Dia'
},
axisFormat: 'HH:mm',
timeFormat: 'HH:mm',
editable: false,
droppable: false,
eventTextColor:"#FFF",
eventColor:"#337AB7",
selectable: true,
selectHelper: true,
eventLimit: 4,
eventDurationEditable: false,
locale: 'es',
timeZone: 'UTC -4',
themeSystem: 'themeSystem',
defaultView: 'dayGridMonth',
nowIndicator: true,
eventsSources:
function ( start, end, timeZoneStr, callback ){
$.ajax({
type:'GET',
url:'{{ url("load_calendar" )}}',
success: function (data){
callback(data);
}
})
}
})
calendar.render();
});
</script>
this is my controller function
public function load_calendar(){
$all_event = calendarModel::all()->toArray();
$event_data=array();
foreach ($all_event as $key => $event_val) {
$event_data[$key]['title'] =$event_val['event_titulo'];
$event_data[$key]['start'] =date('d/m/Y H:i:s', strtotime($event_val['event_fecha_inicio']));
$event_data[$key]['end'] =date('d/m/Y H:i:s', strtotime($event_val['event_fecha_final']));
$event_data[$key]['start_formate'] =date('d/m/Y H:i:s', strtotime($event_val['event_fecha_inicio']));
$event_data[$key]['end_formate'] =date('d/m/Y H:i:s', strtotime($event_val['event_fecha_final']));
$event_data[$key]['events_id'] = $event_val['id'];
$event_data[$key]['event_description'] =$event_val['event_descripcion'];
$event_data[$key]['created_at'] =date('d/m/Y', strtotime($event_val['created_at']));
$event_data[$key]['updated_at'] =date('d/m/Y', strtotime($event_val['updated_at']));
}
echo json_encode($event_data);
dump($event_data);
}
my route is the following
Route::get('load_calendar','calendarController@load_calendar')->name('load_calendar');
This is what the json array returns
The only error I see is the lines:
He
dump($event_data);
should be deleted. And preferably change the return mode fromecho
toreturn
eventsSources
does not exist, it iseventSources
.If what you want is to show the events that you get by JSON, use events (as a json feed) . Replace your
eventsSources
withevents
.On the other hand, the format of the dates of
start
andend
is not correct. You have to use one of the ones defined in Date Parsing :Finally, as @Shassain says, if you want to specify that you want to return a JSON, use the Laravel syntax:
If not, returning the directly
array
is enough, Laravel automatically converts it to JSON.