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

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,
})