如何通过script标签全局引入使用FullCalendar iCalendar插件

核心错误原因 #

你代码里的plugins: [DayGridPlugin, iCalendarPlugin]是ES模块化按需引入的写法，不适配全局script引入的场景。
全局引入模式下，FullCalendar不会把DayGridPlugin、iCalendarPlugin暴露为独立的全局变量，所有内置视图插件、第三方插件都会统一挂载到FullCalendar全局对象的命名空间下，直接写裸变量会触发未定义报错。
另外你当前引入的ical.js版本过旧（0.0.3），和FullCalendar 5.5.1版本不兼容，会导致iCalendar数据解析失败。

修正步骤 #

• 调整引入顺序、替换适配版本的ical.js，解决版本不兼容问题
• 修改plugins数组的引用方式，所有插件从FullCalendar全局对象下获取
• 删除重复引入的冗余样式表标签

修正后可直接运行的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.css"
      rel="stylesheet"
    />
    <link href="./style.css" rel="stylesheet" />
    <!-- 替换为适配版本的ical.js，移除旧的不兼容版本 -->
    <script src="https://cdn.jsdelivr.net/npm/ical.js@1.5.0/build/ical.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/locales-all.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/icalendar@5.5.1/main.global.min.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var calendarEl = document.getElementById("calendar");
        var today = new Date().toISOString().split("T")[0];

        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: "dayGridMonth",
          initialDate: today,
          headerToolbar: {
            left: "prev,next today",
            center: "title",
            right: "dayGridMonth,timeGridWeek,timeGridDay",
          },
          // 从全局对象下获取插件，替换原来的裸变量写法
          plugins: [
            FullCalendar.DayGrid,
            FullCalendar.TimeGrid,
            FullCalendar.ICalendar
          ],
          events: {
            url: "https://www.gov.uk/bank-holidays/england-and-wales.ics",
            format: "ics",
          },
        });

        calendar.render();
      });
    </script>
  </head>
  <body>
    <div id="calendar"></div>
  </body>
</html>

适配Sphinx+GitHub Pages场景的注意点 #

• 你通过扩展生成的.ics文件，可以直接作为events.url的路径使用，只要保证文件和页面的相对引用关系正确即可
• 不需要在Sphinx构建环节做额外的插件处理，只要把上述script、link标签嵌入对应页面的模板即可
• GitHub Pages是纯静态托管场景，iCalendar插件会直接在前端解析.ics文件，只要目标.ics文件允许跨域访问，即可正常加载显示事件

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