Показывать события из моей БД в FullCalendar 4 - PullRequest
Новая
       10

Показывать события из моей БД в FullCalendar 4

3 голосов
/ 30 октября 2019

Я пытаюсь импортировать свои данные из моей базы данных MySQL на страницу полного календаря 4 в приложении Laravel 5.2.

Мой файл 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();
});

Здесь функциина странице Контроллер 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;
    }

Часть для маршрутов для страницы календаря: 

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

А вот представление 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 %}

Я вижу, что события JSON правильно отформатированы (когда я загружаю свою страницу getEvents), но на моей странице календаря ничего не появляется.

Мой JSON выглядит так: 

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

Я проверил его с помощьюJSON lint.

1 Ответ

1 голос
/ 31 октября 2019

Даже если у вас есть только одно событие, оно должно быть внутри массива, чтобы fullCalendar его мог распознать, например, 

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

Но я думаю, что логика вашего PHP неверна - похоже, он будет проходить черезвсе ваши события, но продолжайте переписывать свойства переменной $events значением следующего события в цикле. Таким образом, даже если у вас есть 100 событий в вашей базе данных, она всегда будет выводить только одно, и это будет всегда один объект (вместо массива) при сериализации в JSON. Я думаю, вам нужно изменить его следующим образом: 

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;
}

Это создает отдельное событие в $event для каждой записи в базе данных, а затем добавляет эту новую запись события в общий список $events послеон был создан.

...