如何通过URL参数直接唤起Fullcalendar指定ID事件的模态框？

完全可行，具体可以按以下步骤实现：

• 解析URL中的事件ID参数
  用JavaScript获取URL里的id参数，代码示例：

  const urlParams = new URLSearchParams(window.location.search);
  const targetEventId = urlParams.get('id');
  

• 在日历事件加载完成后触发模态框
  借助Fullcalendar的eventsSet钩子（该钩子会在所有事件加载完成后执行），判断是否存在目标事件ID，找到对应事件后直接调用你原本用来唤起模态框的函数。

  假设你原本点击事件唤起模态框的函数是openEventModal(event)，完整示例代码如下：

  document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const urlParams = new URLSearchParams(window.location.search);
    const targetEventId = urlParams.get('id');
  
    const calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'timeGridWeek', // 你的周历视图配置
      events: '/your-events-data-source', // 事件数据源，可替换为你的接口或数组
      eventsSet: function(events) {
        if (targetEventId) {
          // 匹配对应ID的事件
          const targetEvent = events.find(item => item.id === targetEventId);
          if (targetEvent) {
            openEventModal(targetEvent);
            // 可选：自动滚动到该事件的时间位置，优化用户体验
            calendar.scrollToTime(targetEvent.start);
          }
        }
      },
      // 保留你原本的事件点击逻辑
      eventClick: function(info) {
        openEventModal(info.event);
      }
    });
  
    calendar.render();
  });
  

• 注意要点

  • 确保事件对象的id属性和URL参数的id类型一致（比如都是字符串或数字），避免匹配失败
  • 如果事件是异步加载的，eventsSet比eventDidMount更合适，因为它会等所有事件加载完成后再执行
  • 要保证唤起模态框的函数在执行时，模态框的DOM元素已经存在

内容的提问来源于stack exchange，提问作者Arie