What wrong, fullcalendar JSON feed not showing while use eventSources - php

Question

Like everyone else I also have problem when displaying event in fullcalendar.
Below is my controller for JSON data:
function schedule($id) {
$data = $this->M_care->getSchedule($id);
echo json_encode($data);
exit;
}
This controller produce JSON data like that:
[{"id":"51","title":"test date","start":"2022-03-31T00:00:00-05:00","end":"2022-03-31T00:00:00-05:00"},{"id":"53","title":"test date","start":"2022-03-29T00:00:00-05:00","end":"2022-03-29T00:00:00-05:00"}]
and below is script for render calendar:
document.addEventListener('DOMContentLoaded', function() {
var initialLocaleCode = 'id';
var calendarEl = document.getElementById('calendar');
var url = '<?= base_url('service/Care/schedule/').$id; ?>';
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
validRange: function(nowDate) {
return {
start: nowDate
};
},
eventSources: [
{
url: url,
color: 'red',
textColor: 'black',
display: 'background'
}
]
});
calendar.render();
});
The $id in the url variable get from $id = $this->session->userdata('event');
Above code is not working for displaying events data. I have trying to solve this for several days, and search related question but none of them fix this issue.