Popup not working/showing on React-Big-Calendar

Question

I am building a calendar with React-Big-Calendar and the popup feature isn't working.

<div className={styles.calendarContainer} style={{ height: "700px" }}>
        <Calendar
          localizer={localizer}
          events={eventsArr}
          startAccessor="start"
          endAccessor="end"
          popup={true}
        />
      </div>

I tried wrapping the calendar component on a div with a set height, tried explicitly setting the popup prop to true (normally, you only need to add popup to the props list and it defaults to true), but nothing seems to work.

I wonder if this has anything to do with the fact I had to use --legacy-peer-deps when installing React-Big-Calendar. Apparently it had an issue with me using React 18 (via Nextjs) and I couldn't install it otherwise. I am even getting a couple of errors like:

• "Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code."
• "findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DateContentRow which is inside StrictMode. Instead, add a ref directly to the element you want to reference."

When I click on the popup nothing happens. If I remove the popup prop or set it to false, then it goes back to the default behaviour of taking the user to the day view.

Has anyone come across a similar issue? Is React-Big-Calendar an outdated option or am I safe to use it?

Answer 1

It's the StrictMode, because of the findDOMNode in the code. There's a fix in the works for that.