FullCalendar 5添加事件异常：CRM外部按钮点击无效果求助

我帮你梳理下代码里的几个关键问题，这些问题直接导致了添加事件的功能无法正常运行：

• 重复创建FullCalendar实例
  你在两个不同的<script>标签里分别创建了calendar实例：第一个是在DOMContentLoaded事件里用原生JS获取元素创建的，第二个是用jQuery选择器创建的。这会导致你点击按钮时操作的是第二个可能未正确初始化/渲染的实例，而页面上显示的是第一个实例，自然看不到新添加的事件。

• HTML结构错误
  你的HTML里<body>标签在<head>之前就错误闭合了，还出现了重复的<body>标签，这会导致浏览器解析DOM时出现异常，元素的获取和渲染都会受影响。

• 脚本加载顺序问题
  你先加载了FullCalendar的main.js，之后才加载jQuery。如果你的FullCalendar版本依赖jQuery（或者你在代码中使用了jQuery），正确的顺序应该是先加载jQuery，再加载FullCalendar相关脚本。

• addEvent方法的误用（最初版本的问题）
  你最初尝试用calendarEl.addEvent()，但addEvent是FullCalendar实例的方法，不是DOM元素或jQuery对象的方法，必须调用你创建的calendar实例的这个方法才行。

修正后的完整代码 #

<html>
<head>
  <!-- 先加载jQuery，保证依赖顺序正确 -->
  <script src="/assets/plugins/jquery/jquery.min.js"></script>
  <!-- 再加载FullCalendar的核心脚本 -->
  <script src='../lib/main.js'></script>
  <!-- 必须引入FullCalendar的样式文件，否则日历显示会异常 -->
  <link rel='stylesheet' href='../lib/main.css' />
</head>
<body>
  <button id="testbtn">Add lunch time</button>
  <div id='calendar-container'>
    <div id='calendar'></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var calendarEl = document.getElementById('calendar');
      // 统一配置日历的基础选项
      var calendarOptions = {
        initialView: 'dayGridMonth', // 示例视图，可替换为你的配置
        // 其他日历配置（比如header、事件源等）都写在这里
      };
      // 只创建一次日历实例，并挂载到全局，确保点击事件能访问到
      window.calendar = new FullCalendar.Calendar(calendarEl, calendarOptions);
      calendar.render();
    });

    $(document).on("click", "#testbtn", function(){
      // 调用全局的calendar实例添加事件
      window.calendar.addEvent({
        title: 'Lunch',
        start: '2020-08-08T12:30:00',
        end: '2020-08-08T13:30:00'
      });
      // 注意：addEvent方法执行后，FullCalendar会自动更新视图，不需要手动调用render()
    });
  </script>
</body>
</html>

额外说明 #

1. 把日历实例挂载到window对象上是为了让点击事件的回调能访问到它，你也可以把点击事件的代码放在DOMContentLoaded回调内部，这样就不需要全局挂载了。
2. 一定要引入FullCalendar的样式文件，否则日历的界面会错乱。
3. addEvent方法执行后，FullCalendar会自动重新渲染视图，所以不需要额外调用calendar.render()。

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