2

I am using FullCalendar in a React page and in order to get the events I am using events as a json feed (https://fullcalendar.io/docs/events-json-feed). The data gets loaded fine however when I use eventClick or dateClick to open a modal, FullCalendar is refreshing and another POST request is sent to the backend.

Is there a way to prevent that? I want to avoid sending unnecessary requests...

Also, as the data gets refreshed the calendar events are re-drawn and this causes to look like a glitch. Similar to this:

https://user-images.githubusercontent.com/3365507/85287154-6fc61c00-b4c6-11ea-83c1-cb72a3aec944.gif

Here are a few examples of the code I am using:

<FullCalendar

...

eventClick={handleEventClick}
dateClick={handleDateClick}
eventSources={[
  {
    events: fetchEvents,
    failure: function() {
      console.log('ERROR');
    }
  },
]}

...

/>

And fetchEvents is something like this:

const fetchEvents = (fetchInfo, successCallback, failureCallback) => {
  fetch('http://localhost/calendarEvents', {
    method: 'POST',
    body: JSON.stringify(fetchInfo),
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then((res) => res.json())
    .then((data) => {
      const parsedEvents = [];
      for (const event of data) {
        parsedEvents.push({
          ...event,
          start: moment(event.startAt).toDate(),
          end: moment(event.endAt).toDate(),
          title: event.title
        });
      }
      successCallback(parsedEvents);
    })
    .catch((error) => {
      failureCallback(error);
    });
}

and handleEventClick:

const handleEventClick = (event) => {
  setSelectedEvent(event);
  setOpenEventModal(true);
};

--EDIT--

Here is a CodeSandbox example: https://codesandbox.io/s/suspicious-murdock-4jfept?file=/src/App.js

You can see at the Console tab that a new fetch is tried each time you click at a date to open the Modal. A new fetch is expected only when switching months in the calendar because I am using eventSources json feed option. But if it was already fetched it shouldn't do it again just by opening the Modal.

newtel
  • 21
  • 2

1 Answers1

1

setSelectedEvent(event);
setOpenEventModal(true);

If state changes in <FullCalendar> it will rerender. This may be causing it to call for the data again.

Either stop changing the state in FullCalendar, do your API calls outside and pass in the data, or don't call for the data on every render.

What is the full code for <FullCalendar>?

Jash1395
  • 228
  • 1
  • 6
  • Thanks for your reply, here is a [CodeSandbox example](https://codesandbox.io/s/suspicious-murdock-4jfept?file=/src/App.js) You can see at the Console tab that a new fetch is tried each time you click at a date to open the Modal. A new fetch is expected only when switching months in the calendar because I am using eventSources json feed option. But if it was already fetched it shouldn't do it again just by opening the Modal... I don't no why it happens. – newtel Jan 08 '23 at 13:44
  • @newtel it seems to me that this answer has explained why it happens. – ADyson Jan 11 '23 at 10:20