FullCalendar issues when used with modal
isoaxe opened this issue · comments
I've been attempting to use FullCalendar in conjunction with react-modal but without success. There are some rendering and interaction issues that I will outline below.
To recreate the issue, open the demo I have built here. After loading, you will see the calendar rendered in dayGridMonth view. Then press the + custom button to open the modal. You will see that the background behind the modal should be covered in a red hue. However, some elements of the calendar are seemingly not captured in the modal overlay. As such, they do not get faded as expected (grid, events, date numbers and current day yellow hue). They are also interactive - click on one of the events and you'll see an action occur (listDay view loads). That should not happen either. Clicking outside of the modal should instead close it (as can be demonstrated by clicking on the toolbar when the modal is open). It seems only the body of the calendar is affected by this bug.
Most of the above issues do not occur when tested with listDay view. The exception is that the active button does not fade as expected whilst the modal is open in this view. Unfortunately I was unable to replicate this in the demo. The screenshot below is from the app I am building.
I've tried implementing a modal with plain JS and the same issues occur as with react-modal.
A related issue is that certain css positioning breaks the modal. To test this, open the project linked above and open Calendar.css. Uncomment the positioning attributes for the content class. Then test the modal - you will notice that it can no longer be closed after opening. It appears to be rendered behind the misbehaving calendar elements (though still visible). I have used the very same css on a seperate modal without FullCalendar here and it's fine.
The modal needs a higher z-index to be in front of those elements, eg:
https://codesandbox.io/s/fullcalendar-modal-issue-sf-forked-utqc6?file=/src/main.css