如何防止全日历“moreLink”弹出窗口在点击外部时关闭？

Question

我在nextjs中使用FullCalendar v6，它有一个内置功能，当事件太多时，它会将剩余的事件放在弹出窗口中，通过单击“更多”来显示。我的问题是，当我点击弹出窗口外部时，如何防止弹出窗口关闭？

Answer 1

为了防止在弹出窗口外部单击时关闭弹出窗口，您可以使用 FullCalendar 中的交互对象。具体来说，您可以将弹出窗口类型的启用属性设置为 false。这样，当点击弹出窗口外部时，弹出窗口就不会关闭。

以下示例：

import { Calendar } from '@fullcalendar/react';
import interactionPlugin from '@fullcalendar/interaction';

const MyCalendarComponent = () => {
  const handleEventClick = (info) => {
    // Your event click logic here
  };

  return (
    <Calendar
      plugins={[interactionPlugin]}
      events={[
        // your event data here
      ]}
      eventClick={handleEventClick}
      eventPopover={{
        enabled: true,
        // By default, clicking outside of the popover will close it.
        // To prevent this, set the interaction.enabled property to false.
        interaction: {
          enabled: false,
        },
      }}
    />
  );
};

export default MyCalendarComponent;

您也可以参考这个