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

反应fullCalendar-互动无法正常进行

2 个答案: