Display events from my DB in FullCalendar 4

Question

I'm trying to import my data from my MySQL DB on a fullcalendar 4 page on a Laravel 5.2 app.

My file Calendar.js :

import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import frLocale from '@fullcalendar/core/locales/fr';
import bootstrapPlugin from '@fullcalendar/bootstrap';

document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');

    var calendar = new Calendar(calendarEl, {
        plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, bootstrapPlugin],
        // height: 'parent',
        aspectRatio: 1.5,
        themeSystem: 'bootstrap',
        locale: frLocale,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true,// allow "more" link when too many events
        events: 'getEvents',
    });
    calendar.render();
});

Here the functions in the Controller page EventsController :

public function index(Request $request)
    {
        return view('front.events');
    }

public function getEvents()
    {
        $getEvents = Events::select('coach_id', 'start_date', 'end_date')->get();
        $events = [];

        foreach ($getEvents as $values) {
            $start_date_format = \DateTime::createFromFormat('Y-m-d h:i:s', $values->start_date);
            $end_date_format = \DateTime::createFromFormat('Y-m-d h:i:s', $values->end_date);
            $events ['title'] = $values->coach_id;
            $events ['start'] = $start_date_format->format('c');
            $events ['end'] = $end_date_format->format('c');
        }

        return $events;
    }

The part for routes for the calendar page :

Route::get('/events', 'EventsController@index')->name('events.index');
Route::get('/getEvents', 'EventsController@getEvents')->name('events.getEvents');

And here the view events.twig :

{% extends 'front.layouts.main' %} {% set user = auth_user() %}
{% block css %}
    <link href='https://use.fontawesome.com/releases/v5.0.6/css/all.css' rel='stylesheet'>
{% endblock %}
{% set user = auth_user() %} {% block content %}

    <div class="container mb-5">
        <div class="response"></div>
        <div id='calendar'></div>
    </div>

{% endblock %}

{% block js %}
<script src="{{ asset('js/calendar.js') }}"></script>
{% endblock %}

I can see the events JSON is right formatted (when I load my page getEvents) but nothing appear in my calendar page.

My JSON is like that :

{"title":4,"start":"2019-10-23T11:00:00+00:00","end":"2019-10-23T12:00:00+00:00"}

I validated it with JSON lint.

Can we see a sample of the events JSON please? And, do you see any errors in your browser's Console? Or Ajax errors in the Network view? — ADyson, Oct 30 '19 at 17:19
My JSON is like that : {"title":4,"start":"2019-10-23T11:00:00+00:00","end":"2019-10-23T12:00:00+00:00"} I validated it with JSON lint. — Malkom, Oct 31 '19 at 08:41
Is that all? Even if you only have one event it must be inside an array for fullCalendar to recognise it, e.g. `[{"title":4,"start":"2019-10-23T11:00:00+00:00","end":"2019-10-23T12:00:00+00:00"}]` — ADyson, Oct 31 '19 at 08:57
Yes I have just on event at the moment, just for test my page ;) Can you think it's better to input more events to do my test ? — Malkom, Oct 31 '19 at 09:00
What have you tried to debug the problem? You could use a static JSON array first to check whether that works - to distinguish between an error in your JS code or in the PHP generation of your dynamic output — Nico Haase, Oct 31 '19 at 09:01
@Malkom Well that would actually have revealed a bigger problem, but you missed my point. Even with one just event in your database, you must still return an array to fullCalendar. See my answer below for why I think you've got an issue, and how to fix it. — ADyson, Oct 31 '19 at 09:01

score 1 · Accepted Answer · answered Oct 31 '19 at 09:02

Even if you only have one event it must be inside an array for fullCalendar to recognise it, e.g.

[{"title":4,"start":"2019-10-23T11:00:00+00:00","end":"2019-10-23T12:00:00+00:00"}]

But I think the logic of your PHP is wrong - it looks like it will loop through all your events but keep overwriting the properties of the $events variable with the value of the next event in the loop. So even if you had 100 events in your database it would always only output one, and it would always be a single object (instead of an array) when serialised to JSON. I think you need to change it like this:

public function getEvents()
{
    $getEvents = Events::select('coach_id', 'start_date', 'end_date')->get();
    $events = [];

    foreach ($getEvents as $values) {
        $start_date_format = \DateTime::createFromFormat('Y-m-d h:i:s', $values->start_date);
        $end_date_format = \DateTime::createFromFormat('Y-m-d h:i:s', $values->end_date);
        $event = [];
        $event['title'] = $values->coach_id;
        $event['start'] = $start_date_format->format('c');
        $event['end'] = $end_date_format->format('c');
        $events[] = $event;
    }

    return $events;
}

This creates a single event in $event for each record in the database, and then adds that new event record to the overall $events list after it's been created.

Ok you're right !! After test with 2 events, I have only the last in muy JSON. So you're solution is work !! Thank you @ADyson... very much ;) — Malkom, Oct 31 '19 at 09:12

Display events from my DB in FullCalendar 4

1 Answers1