React fullCalendar-交互不起作用

Question

我正在尝试在React项目中使用FullCalendar，我需要能够每次单击都创建事件。所以我遵循了部分代码：

https://codesandbox.io/s/github/fullcalendar/fullcalendar-example-projects/tree/master/react?file=/src/DemoApp.jsx

日历是显示的，我使用api来修改当前日期，所以我有工作的东西。但是，我无法与它交互。我安装了fullCalendar/interaction并在组件中指定了插件，但在select&日期点击。。。我放了代码的一部分，你有什么想法吗？：/

非常感谢

import React, {useEffect, useState, useRef} from 'react'
import DayPicker from 'react-day-picker';
import MomentLocaleUtils from 'react-day-picker/moment';
import 'moment/locale/fr';
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
const RoomsCalendars = ({match}) => {
const {id} = match.params
const [selectedDay, setSelectedDay] = useState()
useEffect(() => {
setSelectedDay(new Date())
}, [])

const calendarRef = useRef(null)
const  handleDayClick = day => {
setSelectedDay(day);
let calendarApi = calendarRef.current.getApi()
calendarApi.gotoDate(day)
}
const handleTodayClick = day => {
setSelectedDay(day)
let calendarApi = calendarRef.current.getApi()
calendarApi.gotoDate(day)
}
return(
<>
<h1>Salle {id}</h1>
<div className="row">
<div className="lg-3 md-4 sm-12">
<div className="card">
<DayPicker 
localeUtils={MomentLocaleUtils}
locale="fr"
todayButton="Aujourd'hui"
onDayClick={handleDayClick}
selectedDays={selectedDay}
onTodayButtonClick={(day) => handleTodayClick(day)}
fixedWeeks 
/>
</div>
</div>
<div className="lg-9 md-8 sm-12">
<div className="card">
<FullCalendar
plugins={[timeGridPlugin, dayGridPlugin,interactionPlugin]}
initialView="dayGridMonth"
headerToolbar={{
left:'prev,next',
center:'title',
right:'dayGridMonth,timeGridWeek,timeGridDay'
}}
ref={calendarRef}
locale="fr"
slotMinTime="07:00:00"
slotMaxTime="20:00:00"
height={700}
editable={true}
selectable={true}
selectMirror={true}
dayMaxEvents={true}
select={console.log('select')} //NOT WORKING HERE
dateClick={console.log('dateclick')} //SAME
/>
</div>
</div>
</div>
</>
)
}
export default RoomsCalendars

Answer 1

尝试这个

npm i@fullcalendar/interaction

Answer 2

我遇到了完全相同的问题，请尝试eventClick方法

eventClick = {(args) => handleDateClick(args)}
select={console.log('select')} //NOT WORKING HERE
dateClick={console.log('dateclick')} //SAME
const handleDateClick = (arg) => {
console.log(arg);
}