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 &dateclick没有任何反应...我把代码的一部分放进去了，你有什么想法吗？:/

非常感谢

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/交互

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