javascriptreactjsnext.jsreact-big-calendar

Popup not working/showing on React-Big-Calendar


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:

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?


Solution

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