FullCalendar + React, can't made selection for day which contains allDay event

Question

Have a strange issue with FullCalendar + React, I suspect that it might be a bug, but don't sure, maybe I do something wrong. When day contains allDay event, it isn't editable. When I remove this allDay event, everything works good.

The MVCE below and link to sandbox here: https://codesandbox.io/s/elated-leaf-eeq5mp?file=/src/DemoApp.jsx

const Sandbox = () => {

    const events = [
        {
            "_id": "6392d844690474ce8cd8db01",
            "startTime": "05:00:00",
            "endTime": "11:00:00",
            "frequency": 10,
            "description": "testrrr",
            "daysOfWeek": [
                4
            ],
            "_createdAt": "2022-12-09T06:40:04.085Z"
        },
        {
            "_id": "63935c8a192093deab4bccd5",
            "startTime": "01:30:00",
            "endTime": "04:00:00",
            "frequency": 1,
            "description": "",
            "daysOfWeek": [
                4
            ],
            "title": "Hello World!",
            "_createdAt": "2022-12-09T16:04:26.123Z"
        },
        {
            "title": "186",
            "infoEvent": true,
            "start": "2022-12-08T13:06:26.812Z",
            "allDay": true,
            "editable": false,
            "daysOfWeek": [
                "4"
            ]
        }
    ];

    const select = selectionInfo => {
        console.log(selectionInfo);
    }

    return (
        <FullCalendar
            eventOverlap={false}
            selectable
            selectOverlap={false}
            select={select}
            contentHeight='auto'
            aspectRatio={2}
            plugins={[
                dayGridPlugin,
                interactionPlugin,
                timegridPlugin
            ]}
            headerToolbar={{
                left: 'timeGridDay,timeGridWeek,dayGridMonth',
                center: 'title'
            }}
            allDaySlot={true}
            events={events}
            editable
            initialView="timeGridWeek"
        />
    )
}

export default Sandbox;

UPDATE: Tried to reimplement with the plain FullCalendar, without React wrapper, and couldn't reproduce this error https://codepen.io/anatoly314/pen/ExRJRYz?editors=0010. Opened an issue at FullCalendar's github community: https://github.com/fullcalendar/fullcalendar-react/issues/212

Answer 1

It isn't a bug but a feature because I have allDay events and defined eventOverlap as false. Existed allDay event was blocked creating another event.

When I created MVCE for StackOverflow in vanilla JS I didn't use the property eventOverlap and this is a reason why it worked in my example above. When I tried to write my own React component for FullCalendar, I encountered the same behavior. And later, one of the contributors to FullCalendar confirmed this behavior: https://github.com/fullcalendar/fullcalendar-react/issues/212

So, If you need to disable overlap but keep allDay events you need to write your own logic in function rather than boolean, something like this:

    const eventOverlap = (stillEvent, movingEvent) => {
        return stillEvent.allDay;
    }