You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

FullCalendar React封装组件日期选择异常:存在全天事件的日期无法被选中

FullCalendar React封装组件日期选择异常:存在全天事件的日期无法被选中

我碰到个挺奇怪的问题,用FullCalendar的React封装组件时,只要某天里有个allDay类型的事件,那天就没法被选中编辑了。但把这个全天事件删掉之后,所有功能又都正常了,我怀疑这可能是个bug,但也不敢确定是不是自己代码哪里写漏了。

下面是我的最小可复现代码:

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;

后续排查更新

我特意不用React封装,直接用原生FullCalendar重写了一遍逻辑,结果却没复现出这个问题。目前已经在FullCalendar的GitHub社区提交了issue反馈这个异常情况。

备注:内容来源于stack exchange,提问作者Anatoly

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.23 07:17:58