Issue with loading function in FullCalendar React integration

Question

Issue with loading function in FullCalendar React integration

Currently experimenting with FullCalendar v5 for React and exploring the Resource Timeline view feature. Facing an issue with the "loading" function - the idea is to monitor the state of FullCalendar and, if it's in a loading state, display a Spinner component instead of the Timeline. The plan was to trigger the Spinner component by changing its state using useState within the FullCalendar component itself, which resulted in an infinite render loop. Any suggestions on how to resolve this?

 
// Implementation of loading function and useState method in the container component of FullCalendar

const [spinner, setSpinner] = useState(true);

let loadingFunction = (isLoading) => {
  if (isLoading) {
    console.log("loading");
    setSpinner(true);
  } else {
    console.log("idle");
    setSpinner(false);
  }
};

// Conditional rendering logic
return (
  <>
    {spinner ? (
      <Spinner />
    ) : (
      <>
        <FullCalendar
          loading={loadingFunction}
          ref={calendarRef}
          dateClick={handleEventCreate}
          .....

html css reactjs fullcalendar fullcalendar-5

Answer 1

Answer №1

Entered into the same scenario. My method, perhaps a bit unconventional, goes like this. Rather than using a state variable to control the spinner's display, I decided to incorporate a CSS class that hides it off screen. I then obtained a reference to the spinner and, during the loading process in FullCalendar, I executed a function that removed the off-screen class temporarily, only to add it back once the loading was completed.

    /**
    * @type {{current: HTMLElement}}
    */
    const ripple = useRef(null);

    const toggleSpinner = useCallback((state) => {
        if (ripple.current) {
            if (state) {
                ripple.current.classList.remove("off-screen");
            }
            else {
                ripple.current.classList.add("off-screen");
            }
        }
    }, [ripple]);

    /*...*/

    return <>
        <div ref={ripple} className="off-screen spinner"></div>
        <FullCalendar
            loading={s => toggleSpinner(s)}

        />

    </>

Wishing you success, Staffan

Answer 2

Entered into the same scenario. My method, perhaps a bit unconventional, goes like this. Rather than using a state variable to control the spinner's display, I decided to incorporate a CSS class that hides it off screen. I then obtained a reference to the spinner and, during the loading process in FullCalendar, I executed a function that removed the off-screen class temporarily, only to add it back once the loading was completed.

    /**
    * @type {{current: HTMLElement}}
    */
    const ripple = useRef(null);

    const toggleSpinner = useCallback((state) => {
        if (ripple.current) {
            if (state) {
                ripple.current.classList.remove("off-screen");
            }
            else {
                ripple.current.classList.add("off-screen");
            }
        }
    }, [ripple]);

    /*...*/

    return <>
        <div ref={ripple} className="off-screen spinner"></div>
        <FullCalendar
            loading={s => toggleSpinner(s)}

        />

    </>

Wishing you success, Staffan

Answer 3

Answer №2

It appears that the issue extends beyond a simple conditional display of the calendar.

Consider this code snippet:

  const [loading, setLoading] = useState(false)
  ...

  {loading ? <Spinner /> : null}

  <FullCalendar
    plugins={[ dayGridPlugin ]}
    initialView="dayGridMonth"
    loading={e => setLoading(e)} // This line seems to cause an infinite loop when loading
    eventSources={[{
        url: '/api/calendar',
        method: 'GET',
      }]}
    />

The calendar works fine without the loading line, but adding it results in continuous reloads and a spinning loader during data fetches.

Any change triggers a reload of the data source, leading to this unexpected behavior.

This could be a bug or lack of clarity in the documentation for FullCalendar in React (https://fullcalendar.io/docs/loading).

It's worth noting that this issue does not occur with just initialEvents, although that option limits flexibility.

Answer 4

It appears that the issue extends beyond a simple conditional display of the calendar.

Consider this code snippet:

  const [loading, setLoading] = useState(false)
  ...

  {loading ? <Spinner /> : null}

  <FullCalendar
    plugins={[ dayGridPlugin ]}
    initialView="dayGridMonth"
    loading={e => setLoading(e)} // This line seems to cause an infinite loop when loading
    eventSources={[{
        url: '/api/calendar',
        method: 'GET',
      }]}
    />

The calendar works fine without the loading line, but adding it results in continuous reloads and a spinning loader during data fetches.

Any change triggers a reload of the data source, leading to this unexpected behavior.

This could be a bug or lack of clarity in the documentation for FullCalendar in React (https://fullcalendar.io/docs/loading).

It's worth noting that this issue does not occur with just initialEvents, although that option limits flexibility.

Issue with loading function in FullCalendar React integration

Answer №1

Answer №2

Similar questions

The calculator I designed using HTML, CSS, and JavaScript is experiencing difficulty adjusting to various screen sizes

React application experiencing incorrect hexadecimal hash value output in crypto function

Nested divs with independent scrolling capabilities

Display excerpts of code within an Angular application within the HTML segment

Positioning a centered div with absolute positioning may result in offset issues on Android devices when the content exceeds the viewport size

Using Material UI Tooltip for displaying multi-line content on a web page

What's the best way to establish the namespace for styled components within a create-react-app environment?

The sticky positioning feature seems to be malfunctioning exclusively on mobile devices

After successfully deploying on Netlify, ReactDOM.createRoot() does not insert the #root div

How to increase the width of the bars in an Apex chart's pie chart

Tips for compiling JSX files for React in Rails 7

Is it possible to display one division on top of another with a transparent opacity effect in HTML?

How about a material-ui card housing an interactive openlayers map?

Cut off a string from the start

Does the entire state get replaced every time a change is made if the state is immutable?

jQuery Ajax form submission encountering issues

An error occurs when trying to execute the "products" function after performing destruct

Styles for Material UI 5 class names

Contenteditable feature dynamically styling text upon input

Bootstrap CDN causing modals to fail to appear