next.js 如何防止全日历“moreLink”弹出窗口关闭时,点击外?

x6492ojm  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(172)

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

dhxwm5r4

dhxwm5r41#

若要防止在弹出窗口外部单击时关闭弹出窗口,可以使用FullCalendar中的交互对象。具体来说,可以将弹出框类型的enabled属性设置为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;

您也可以参考this

相关问题