Why can't Fullcalendar show my data using Laravel Eloquent and jquery? - php

Question

I've been having trouble with Full Calendar. I already tried different approaches but to no avail. The json response doesn't shows up in the calendar.
View:
<div class="col-lg-12 col-md-12">
<div id="calendar">
</div>
</div>
Controller:
public function calendar(Request $request){
if($request->ajax()){
$data= Table::where('id',Auth::user()->id)
->where('DateFrom','>',$request->start)
->where('DateTo','<',$request->end)
->get();
return response()->json($data);
}
}
Route:
Route::get('/calendar', [CalendarController::class, 'calendar'])->name('calendar');
Script (mix):
$('#calendar').fullCalendar({
events: 'calendar',
eventColor: '#378006',
displayEventTime: true,
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
})
There are no errors, the data is also being fetched but the problem is the calendar can't render it. May I ask is there any problem with this? Do I need to actually create a partial view for this and then include it to another blade file?

Answer 1

The problem was that I was fetching a different type of date which doesn't match up with the dates from the Fullcalendar. So to show/highlight those dates I did this.
Controller:
public function calendar(Request $request){
if($request->ajax()){
$event= Table::where('id',Auth::user()->id)
->where('DateFrom','>',date('Y-m-d',$request->start)) //converts date
->where('DateTo','<',date('Y-m-d',$request->end)) //converts date
->get();
$data = [];
foreach($event as $row){
$data[] = [
'title' => $row->title,
'start' => date(DATE_ISO8601,strtotime($row->DateFrom)),
'end' => date(DATE_ISO8601,strtotime($row->DateTo))
];
}
return response()->json(collect($data));
}
return view('partials._calendar-details',compact('data'));
}
and then for my script:
$('#calendar').fullCalendar({
// events: 'calendar',
eventColor: '#378006',
displayEventTime: false,
eventSources: [
{
events: function(start, end, timezone, callback ){
$.ajax({
url: '/calendar',
type: 'GET',
data: {
// our hypothetical feed requires UNIX timestamps
start: start.unix(),
end: end.unix()
},
dataType: 'json',
success: function(res) {
var events = [];
for (var i = 0; i < res.length; i++){
console.log(res[0].title);
events.push({
title: res[0].title,
start: res[0].start,
end: res[0].end
});
}
callback(events);
},
});
},
color: 'darkblue', // an option!
textColor: 'white', // an option!
}
],
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
})