fullcalendar / fullcalendar-react

The official React Component for FullCalendar
https://fullcalendar.io/docs/react
MIT License
2.09k stars 110 forks source link

Calling events as a function causes API to be called in a loop #210

Closed PatrickJohnson1 closed 2 years ago

PatrickJohnson1 commented 2 years ago

I currently need to dynamically load events into fullCalendar using events, however, this causes my API to be called infinitely. Is this a bug or is it meant to be?

This code below loads events into my calendar, however, it calls my api infinitely.

const [events, setEvents] = useState(0);
const getEvents = async () => {
    //Get events from database
    const theEvents = await ...
    setEvents(theEvents);
};

const returnEvent = () => {
    getEvents();
    return events;
}

<FullCalendar
    timeZone={'Europe/London'}
    now={DateTime.local().setZone('Europe/London').toISO()}
    ref={calendarRef}
    initialView="dayGridMonth"
    height='100%'
    ...
    events = {returnEvent()}
/> 

If you think it is because I am not using arrow functions in events, changing it to an arrow function does not work either. It calls my API infinitely and leads to no events to be shown on the calendar.

<FullCalendar
    timeZone={'Europe/London'}
    now={DateTime.local().setZone('Europe/London').toISO()}
    ref={calendarRef}
    initialView="dayGridMonth"
    height='100%'
    ...
    events = {() => returnEvent()}
/> 

Is this a bug? And to make matters worse, anytime I use arrow functions in events, no matter the output, it will never load the events into the calendar. This is true even with the example from the documentation.

const returnEvent = () => {
    let todayStr = new Date().toISOString().replace(/T.*$/, '') // YYYY-MM-DD of today
    const events = [
      {
        id: createEventId(),
        title: 'All-day event',
        start: todayStr
      },
      {
        id: createEventId(),
        title: 'Timed event',
        start: todayStr + 'T12:00:00'
      }
    ]
    // getEvents();
    return events;
}

<FullCalendar
    timeZone={'Europe/London'}
    now={DateTime.local().setZone('Europe/London').toISO()}
    ref={calendarRef}
    initialView="dayGridMonth"
    height='100%'
    ...
    events = {() => returnEvent()}
/> 

Is this a bug as well? If I remove the arrow function and just do events = {returnEvent()} it works fine for this example.

acerix commented 2 years ago

Please refer to the support page and use Stack Overflow for help. If this is a bug, please supply a runnable, stripped-down demonstration.