What wrong, fullcalendar JSON feed not showing while use eventSources

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.