我正在尝试从 Laravel 5.2 应用程序的 fullcalendar 4 页面上的 MySQL 数据库导入数据。
我的文件 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();
});
这里是 Controller 页面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');
这里是 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 %}
我可以看到事件 JSON 格式正确(当我加载页面 getEvents 时),但我的日历页面中没有显示任何内容。
我的 JSON 是这样的:
{"title":4,"start":"2019-10-23T11:00:00+00:00","end":"2019-10-23T12:00:00+00:00"}
我使用 JSON lint 对其进行了验证。
最佳答案
即使您只有一个事件,它也必须位于数组内,以便 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
列表中。
关于php - 在 FullCalendar 4 中显示我的数据库中的事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58628501/