在 Fullcalendar V5 上使用 Ajax 从数据库中获取事件后未显示

Question

I am trying to fetch events from database using Ajax and then display it on FullCalendar Scheduler v5.6.0 , I can see that events are returned from database but not rendering. Here what i have tried so far.

document.addEventListener("DOMContentLoaded", function () {
  var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  headerToolbar: {
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },

    events: function (fetchInfo, successCallback, failureCallback) {
      jQuery.ajax({
        url:  "/getrecords",
        type: "GET",
 
        success: function (data) {
          var events = [];
          for (var i = 0; i < data.event.length; i++) {

            console.log(data.event[i].title); // It shows all event titles perfectly
               
          events.push({
          title: data.event[i].title,
          start: data.event[i].from_data,
          end: data.event[i].to_date, 
            });
          }
               console.log(events) // Here i have list of all events
        

          successCallback(events);
        },
      });
    },
  });
  calendar.render();
});

If i put static events in events objects it works fine,but not rendering while called from database using Ajax. Any help would be highly appreciated.

Below is the console output.

Answer 1

I achieved this by using this code on my project.

var calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  headerToolbar: {
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
    events: {
                url: encodeURI('/getrecords'),
                type: 'GET',
                color: 'red', // a non-ajax option
                textColor: 'white' // a non-ajax option
            }
}