完整日历检索事件(抛出 PHP)日历未加载

Question

我正在尝试在我正在构建的网站上实现一个完整的日历。由于我对javascript的了解非常有限，我正在努力将数据从数据库中取出并进入javascript。

我正在使用代码点火器框架。但我认为这对这个问题并不重要。

我试图在网上寻找解决方案，但我相信他们在上次修订的全日历中发生了很大变化，因为我发现大多数(如果不是全部(示例都不起作用。我很惊讶我什至设法得到了一个白日历。

<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Een kalender</h1>
<!-- Display Our Calendar -->
<div id="calendar"></div>
</div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var date_last_clicked = null;
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
defaultView: 'dayGridMonth',
defaultDate: '2019-08-07',
selectable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
events: function(start, end, timezone, callback) {
$.ajax({
url: '<?php echo base_url('calendar/get_events') ?>',
dataType: 'json',
data: {
start: start.unix(),
end: end.unix()
},
success: function(msg) {
var events = msg.events;
callback(events);
}
});
}
});
calendar.render();
});
</script>

/**
* Geef de events terug
*/
public function get_events()
{
// Our Start and End Dates
// $start = $this->input->get("start");
// $end = $this->input->get("end");
$start = strtotime('2019-08-01 01:00:00');
$end = strtotime('2019-08-31 01:00:00');
$startdt = new DateTime('now'); // setup a local datetime
$startdt->setTimestamp($start); // Set the date based on timestamp
$start_format = $startdt->format('Y-m-d H:i:s');
$enddt = new DateTime('now'); // setup a local datetime
$enddt->setTimestamp($end); // Set the date based on timestamp
$end_format = $enddt->format('Y-m-d H:i:s');
$events = $this->calendar_model->get_events($start_format, $end_format);
$data_events = array();
foreach($events->result() as $event) {
$data_events[] = array(
"id" => $event->event_id,
"title" => $event->event_title,
"description" => $event->event_description,
"end" => $event->event_end,
"start" => $event->event_start
);
}
// Edited on stackoverflow 
echo json_encode($data_events);
exit();
}

[{"id":"1","title":"Trouw","description":"Familie hoenkeboenke","end":"2019-08-31 00:00:00","start":"2019-08-30 00:00:00"},{"id":"2","title":"Love shoot","description":"Geen flauw idee","end":"2019-08-29 00:00:00","start":"2019-08-29 00:00:00"}]

我希望事件显示在日历中。

Answer 1

似乎我正在使用新旧代码的组合(完整日历的第 3 版和第 4 版(。

在思考并主要看这篇文章之后：

如何使用 AJAX 在更改事件对象后刷新全日历 v4

我设法让它工作。

我的第一个 mestake 是发送一个生成不良的 json。如果有人需要，这是更新的代码。

/**
* Geef de events terug
*/
public function get_events()
{
// Our Start and End Dates
$start = strtotime($this->input->get("start"));
$end = strtotime($this->input->get("end"));
// $start = strtotime('2019-08-01 01:00:00');
// $end = strtotime('2019-08-31 01:00:00');
$startdt = new DateTime('now'); // setup a local datetime
$startdt->setTimestamp($start); // Set the date based on timestamp
$start_format = $startdt->format('Y-m-d H:i:s');
$enddt = new DateTime('now'); // setup a local datetime
$enddt->setTimestamp($end); // Set the date based on timestamp
$end_format = $enddt->format('Y-m-d H:i:s');
$events = $this->calendar_model->get_events($start_format, $end_format);
$data_events = array();
foreach($events->result() as $event) {
$data_events[] = array(
"id" => $event->event_id,
"title" => $event->event_title,
"start" => $event->event_start,
"end" => $event->event_end,
"description" => $event->event_description
);
}
// echo json_encode(array("events" => $data_events));
echo json_encode($data_events);
exit();
}

然后我的下一个目标是使用 v3 事件：函数(开始...

这是新的JavaScript代码

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
defaultView: 'dayGridMonth',
defaultDate: '2019-08-07',
selectable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
{
events: function(fetchInfo, successCallback, failureCallback) {
$.ajax({
url: '<?php echo base_url('calendar/get_events') ?>',
dataType: 'json',
data: {
"start":fetchInfo.start.toDateString(),
"end":fetchInfo.end.toDateString()
},
success: function(response) {
successCallback(response);
}
});
},
}
],
});
calendar.render();
});