FullCalendar React eventClick/dateClick 未触发

Question

我开始测试 FullCalendar，但似乎无法弄清楚这部分。我的组件加载良好，我的事件由 RTK 查询拉取并显示良好，但 eventClick 和 dateClick 方法根本没有触发。目前，我没有做任何花哨的事情，只是设置警报。从文档来看，eventClick（不需要任何额外的插件）和dateClick（需要并且我已经安装了）应该设置为组件的道具，仅此而已。环顾四周，我遇到了其他人也有同样的问题，但在其他框架（如 VueJS）中，大多数问题似乎都是通过调整 css 来解决的，但是对于 React 情况，组件和插件正在幕后拉动 css，所以它他们似乎不应该是问题的根源。如果有人对此有任何见解，或者可以发现我哪里出错了，我将不胜感激任何帮助/反馈。

import React, { useContext } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import { useGetUserScheduleVisitsQuery } from '../../redux/apiSlice';
import { UserContext } from '../userviews/UserContext';
import ScheduleVisit from '../visitviews/ScheduleVisit';

export default function Schedule () {
    const { user } = useContext(UserContext)
    const userId = user._id

    const { data: visits, isSuccess, isLoading} = useGetUserScheduleVisitsQuery(userId)

    const handleDateClick = () => {
        alert("clicked")
    }

    const handleEventClick = (arg) => {
        alert(arg.event.title)
        alert(arg.event.start)
    }

    return (
        <FullCalendar
            plugins={[ dayGridPlugin, timeGridPlugin, interactionPlugin ]}
            initialView="dayGridMonth"
            headerToolbar= {{
                left: 'prev,next',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            }}
            events={visits}
            dateClick={handleDateClick}
            eventClick={handleEventClick}
        />
    )
}

Answer 1

将 editable={true} 属性添加到 FullCalendar 组件，然后重试

<FullCalendar
        plugins={[ dayGridPlugin, timeGridPlugin, interactionPlugin ]}
        initialView="dayGridMonth"
        headerToolbar= {{
            left: 'prev,next',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        }}
        events={visits}
        dateClick={handleDateClick}
        eventClick={handleEventClick}
        editable={true}

    />