In calendar control renderEvent is not working?

Question

In calendar control after inserting data, I call renderEvent to get recently inserted data. But I have found undefied. #when i refresh browser I get that data but using render I didn't get data.

Here is my code.

$.ajax({
  type: "POST",
  url: "/Admin/Calendar/SaveBookings",
  dataType: "JSON",
  data: { title, Description, startDate, EndDate },
  success: function (response) {
    debugger;
    $("#bookingModal").modal("hide");
    $("#calendar").fullCalendar("renderEvent", {
      title: response.title,
      description: response.description,
      start: response.startDate,
      end: response.endDate,
    });
  },
  error: function (error) {
    if (error.responseJSON.errors) {
      $("#titleError").html(error.responseJSON.errors.title);
    }
  },
});

Answer 1

Here you need to make some changes in FullCalendar.

• successCallback we need to create eventsArray we will push when we want to update the calendar.

events: function (info, successCallback, failureCallback) {
    successCallback(eventsArray);
}

• Push new events to calendar using eventsArray.push(eventData);
• Refresh calendar with calendar.refetchEvents();

Try below Snippet

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
        height: 600,
        plugins: ['dayGrid', 'interaction'],

        eventClick: function (info) {
            alert(info.event.title)
        },
        events: function (info, successCallback, failureCallback) {
            successCallback(eventsArray);
        }
    });

    calendar.render();
    var eventData = {
        title: 'New Event',
        start: '2023-04-25T14:00:00',
        end: '2023-04-26T16:00:00'
    };
    eventsArray.push(eventData);
    calendar.refetchEvents();
});

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css" rel="stylesheet" />
<div id="calendar"></div>