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

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;
}