FullCalendar.io脚本日期处理异常：ICS文件无效日期解析失败

1. 统一FullCalendar版本，消除版本冲突 #

你同时引入了v6.1.10和v5.5.1的FullCalendar脚本，版本不兼容会引发各类异常。建议统一使用同一版本：

• 若保留v5.5.1，删除v6.1.10的脚本行：

  <!-- 删除该行：<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script> -->
  

• 若升级到v6.x，需调整插件引入方式（v6的ical插件为独立包，全局模式下插件名称不同）：

  <link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/main.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/icalendar@6.1.10/index.global.min.js"></script>
  

2. 正确声明所需插件 #

使用ICS格式加载事件，必须在Calendar配置中声明对应插件，取消注释并修正插件名称：

• 针对v5.5.1：

  plugins: ['dayGrid', 'icalendar'],
  

• 针对v6.x：

  plugins: [FullCalendar.DayGrid, FullCalendar.iCalendar],
  

3. 处理ICS文件中的无效日期 #

控制台报错的"2024-02-17T::"是无效日期格式，这是ICS文件本身的问题，可通过两种方式解决：

• 检查生成ICS文件的源头，修正日期格式（正确格式示例：2024-02-17T10:30:00或纯日期2024-02-17）
• 若无法修改ICS文件，可在代码中添加过滤逻辑，剔除无效日期的事件：

  events: {
    url: "x.ics",
    format: "ics",
    success: function(events) {
      return events.filter(event => {
        return event.start && !isNaN(new Date(event.start).getTime());
      });
    }
  }
  

完整修复后的v5.5.1代码示例 #

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.css" rel="stylesheet" />
<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 calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: "dayGridMonth",
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay",
    },
    plugins: ['dayGrid', 'icalendar'],
    events: {
      url: "x.ics",
      format: "ics",
      success: function(events) {
        return events.filter(event => {
          return event.start && !isNaN(new Date(event.start).getTime());
        });
      }
    },
  });

  calendar.render();
});
</script>

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