fullcalendar / fullcalendar-react

The official React Component for FullCalendar

Home Page:https://fullcalendar.io/docs/react

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

PatrickJohnson1 opened this issue · comments

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.

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