how to display data from a database to display on full calendar? - php

Question

I tried to display data from the database to be displayed in Full Calendar, but the data would not appear in fullcalendar, I have tried to see references in several web tutorials that integrate this, but it still hasn't worked
my reference :
https://www.patchesoft.com/fullcalendar-with-php-and-codeigniter
https://www.brianrevie.com/how-to-add-full-calendar-codeigniter
How To show fetch events from database with time in fullcalendar
I have the following data
[{"title": "Work", "start": "2019-08-01", "end": "2019-08-01" },{"title": "Work", "start": "2019-08-02","end": "2019-08-02"}]
this my js
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
height: 440,
editable: true,
eventSources: [
{
color: '#306EFE',
textColor: '#ffffff',
events: "<?= base_url('UserDashboard/getAbsen'); ?>"
// events: [{
// title: 'My Big Event',
// start: '2019-12-09',
// end: '2019-12-10'
// },
// {
// title: 'My Second Big Event',
// start: '2019-12-11',
// end: '2019-12-13'
// },
// {
// title: 'My Second Big Event',
// start: '2019-11-11',
// end: '2019-11-13'
// },]
}
]
});
calendar.render();
});
this my controller
public function getAbsen() {
$month = date('11');
$year = date('Y');
$id_karyawan = 26;
// $data = $this->m_data->rekapAbsen($id_karyawan, $month, $year);
$data = $this->m_data->rekapAbsenFullCalendar($id_karyawan);
foreach ($data as $val) {
$id = $val["id_attendance"];
$tgl_db = $val["date_log"];
$tgl = date('Y-m-d', strtotime($tgl_db));
$d = $val["days"];
$c = $val["check_in"];
$o = $val["check_out"];
if ($d == 'Saturday') {
$days = 'Day Off';
} if ($d == 'Sunday') {
$days = 'Day Off';
} else {
if ($c == '00:00:00') {
$days = 'Day Off';
} else {
$days = 'Work';
}
}
$data_array[] = array(
// 'id_attendance' => $id,
'title' => $days,
'start' => $tgl,
'end' => $tgl,
// 'allday' => '0'
);
}
// var_dump($data);
echo json_encode($data_array);
}
and this my fullcalendar, data not showing
where is the fault?

Answer 1

The docs show there are a few methods of specifying a JSON feed of events.
The simplest option is just:
events: '/myfeed.php'
Alternatively, you can use the extended form if you want to also specify some options:
eventSources: [
{
url: '/myfeed.php',
color: 'yellow',
textColor: 'black'
}
Your code does not use either of these formats - you have eventSources but without a url, and with events.
Update your code as follows:
eventSources: [{
color: '#306EFE',
textColor: '#ffffff',
url: "<?= base_url('UserDashboard/getAbsen'); ?>"
}]
The rest of your code works fine, here's a working jsFiddle.