Javascript 完整日历选择Allow not working in ReactJS

Javascript 完整日历选择Allow not working in ReactJS,javascript,reactjs,fullcalendar,momentjs,fullcalendar-4,Javascript,Reactjs,Fullcalendar,Momentjs,Fullcalendar 4,我有一个简单的部分,其中我使用FullCalendarAPI为我的用户显示了一个日历。我只想在ReactJS中禁用上个月的日期 下面是使用jQuery的工作演示。我想要同样的,但在反应- 预期结果 以下是我迄今为止使用FullCalendar文档所做的尝试 这是我的组件 import React,{useState,useffect,useContext,useRef}来自“React”; 从'@FullCalendar/core'导入{Calendar as FullCalendar};

我有一个简单的部分,其中我使用FullCalendarAPI为我的用户显示了一个日历。我只想在ReactJS中禁用上个月的日期

下面是使用jQuery的工作演示。我想要同样的,但在反应-

预期结果

以下是我迄今为止使用FullCalendar文档所做的尝试

这是我的组件

import React,{useState,useffect,useContext,useRef}来自“React”;
从'@FullCalendar/core'导入{Calendar as FullCalendar};
从“@fullcalendar/googlecalendar”导入googleCalendarPlugin;
从“@fullcalendar/daygrid”导入dayGridPlugin;
从“@fullcalendar/timegrid”导入timeGridPlugin;
从“@fullcalendar/interaction”导入interactionPlugin;
从“@fullcalendar/moment”导入momentPlugin;
从“时刻”导入时刻
常量日历=(电影道具)=>{
const[calendar,setCalendar]=useState(“”);
const calendarRef=useRef(“”);
useffect(()=>{
如果(calendarRef.current&&!calendar){
setCalendar(新的完整日历)(calendarRef.current{
插件:[dayGridPlugin,momentPlugin,timeGridPlugin,interactionPlugin,googleCalendarPlugin],
列标题:false,
fixedWeekCount:false,
背景色:“透明”,
标题:{
左:“上一个,下一个今天”,
中心:'标题',
右图:“dayGridMonth,listYear”,
},
是的,
//禁用上个月的过去日期
选择允许:功能(选择信息){
var ms=力矩().startOf(“月”);
返回ms.issameorfore(选择info.start);
},
活动:[{
标题:“妇女历史月”,
开始:“2020-03-01”,
描述:'支持妇女权利和整个三月的进步。获取此视频',
url:'DEV91B55816321CF9D2E7D1EFE6C3E32035973FDF9',
类名:['event1']
}
],
}));        
}
},[calendarRef.current]);
返回(
{calendar&&calendar.render?calendar.render():null}
)
}
导出默认日历;
注意:我使用FullCalendar v4,MomentJS已加载;我可以在控制台上看到它

不幸的是,我的解决方案根本不起作用


我需要做什么才能实现我想要的?

我想你没有安装
@fullcalendar/interaction

没有它,可选道具无法工作

首先,您需要安装它并使用它
npm i@fullcalendar/interaction

然后从“@fullcalendar/interaction”导入它
import interactionPlugin

之后,您应该将这个元素添加到plugins属性中,如下所示

<FullCalendar
   plugins={[ interactionPlugin, dayGridPlugin ]}
   initialView="dayGridMonth"
   selectable={true}
   dateClick={alert('hasgadf')}
/>

最后需要添加
selective={true}
,如上面的示例所示

你应该看看这个医生

尽管
selectInfo.start
不再是momentJS对象,但从技术上讲,这应该仍然有效-演示:也许有人有特定的reactJS知识可以告诉您,为什么您的版本可能存在问题。或者,如果你能制作一个可运行的演示(例如,使用Stackblitz或类似的反应友好的网站),我也许能找到答案。@ADyson感谢兄弟,完整的日历4有很多变化,现在我发现解决方案是使用css。其他月份,没有一个解决方案不能与v4、
.fc正常工作{游标:无;指针事件:无;不透明度:.3;}
` CSS如何帮助选择/不选择日历上的某个区域?这对我来说没有多大意义。CSS唯一的工作就是改变网页的外观。它不会真正影响功能——这是JavaScript的工作。3)它似乎根本不起作用:。首先,被归类为fc其他月份只是细胞的一小部分。你确定这不是巧合吗?