Laravel 8 get data from DB and show in Full calendar JS plugin Not working

Question

Route

Route::get('getEvents', [App\Http\Controllers\CalenderController::class, 'index'])->name('event.getEvents');

Controller

public function index(Request $request)
{
    $getEvents = Appointment::select('patient_id', 'start_time', 'end_time')->get();
    $events = [];

    foreach ($getEvents as $values) {
        $start_time_format = $values->start_time;
        $end_time_format = $values->end_time;
        $event = [];
        $event['title'] = $values->patient_id;
        $event['start'] = $start_time_format;
        $event['end'] = $end_time_format;
        $events[] = $event;
        Debugbar::info($events);
    }

    return $events;
}

Full Calendar Script

var calendar = new FullCalendar.Calendar(calendarEl, {
            editable: true,
            droppable: true,
            selectable: true,
            initialView: getInitialView(),
            themeSystem: 'bootstrap',
            // responsive
            windowResize: function(view) {
                var newView = getInitialView();
                calendar.changeView(newView);
            },
            eventDidMount: function(info) {
                if (info.event.extendedProps.status === 'done') {

                    // Change background color of row
                    info.el.style.backgroundColor = 'red';

                    // Change color of dot marker
                    var dotEl = info.el.getElementsByClassName('fc-event-dot')[0];
                    if (dotEl) {
                        dotEl.style.backgroundColor = 'white';
                    }
                }
            },
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },


            eventClick: function(info) {
                addEvent.modal('show');
                formEvent[0].reset();
                selectedEvent = info.event;
                $("#event-title").val(selectedEvent.title);
                $('#event-category').val(selectedEvent.classNames[0]);
                newEventData = null;
                modalTitle.text('Edit Event');
                newEventData = null;
            },
            dateClick: function(info) {
                addNewEvent(info);
            },
            editable: true,
            events: 'getEvents',
            displayEventTime: true,
            eventRender: function(event, element, view) {
                if (event.allDay === 'true') {
                    event.allDay = true;
                } else {
                    event.allDay = false;
                }
            },
        });
        calendar.render();

I have specified the route correctly in this script as events: 'getEvents', you can see that at the end part of the above script.

Now the result in the frontend is:

There is no data displayed from the DB. And I am getting a console error as: Failed to load resource: the server responded with a status of 404 (Not Found): http://127.0.0.1:8000/getEvents?start=2021-09-26T00%3A00%3A00%2B05%3A30&end=2021-11-07T00%3A00%3A00%2B05%3A30

As you can see there are some unwanted characters in the URL obtained.

The debugging is not working here, I do not know why.. when I add dd($data) or something other there is no debugger part in Frontend.

Please help me to solve this thing.

Thank you.

Answer 1

It is worked. All I was done is correct. The issue was with my route, Due to one function to redirect invalid routes to the 404 page, My route to the controller was not working..

When I put the 404 route to the bottom of all other routes, It is worked.