Full Calendar结合RRule使用exdate时触发TypeError错误排查

错误原因 #

你当前的写法是把两个日期字符串拼接成了单个带多余引号和逗号的长字符串，然后塞进数组里，最终exdate得到的是["'2024-11-05T13:30:00','2024-11-07T13:30:00'"]——这是一个仅含1个元素的数组，元素是不符合格式的拼接字符串，而非2个独立的合法日期字符串。FullCalendar的rrule插件无法识别这种格式，解析时会返回null，进而触发timeZoneOffset读取错误。

解决方法 #

根据接口返回的排除日期格式，选择对应的处理方式：

情况1：接口返回逗号分隔的纯日期字符串（如"2024-11-05T13:30:00,2024-11-07T13:30:00"） #

用split方法直接分割成数组：

// 接口返回的原始字符串
var excludeDatesStr = "2024-11-05T13:30:00,2024-11-07T13:30:00";
// 分割为合法的日期字符串数组
var exdateArray = excludeDatesStr.split(',');
// 传入FullCalendar事件配置
events: [
  {
    title: "重复事件",
    rrule: "FREQ=DAILY;COUNT=10",
    exdate: exdateArray
  }
]

情况2：接口返回JSON格式的数组字符串（如"[\"2024-11-05T13:30:00\",\"2024-11-07T13:30:00\"]"） #

用JSON.parse解析成JavaScript数组：

// 接口返回的JSON数组字符串
var excludeDatesJson = "[\"2024-11-05T13:30:00\",\"2024-11-07T13:30:00\"]";
var exdateArray = JSON.parse(excludeDatesJson);
// 传入配置
events: [
  {
    title: "重复事件",
    rrule: "FREQ=DAILY;COUNT=10",
    exdate: exdateArray
  }
]

情况3：接口直接返回JavaScript数组（后端序列化时返回数组类型） #

无需额外处理，直接赋值即可：

// 接口请求后拿到的数组数据
fetch('/api/getExcludeDates')
  .then(res => res.json())
  .then(exdateArray => {
    const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
      events: [
        {
          title: "重复事件",
          rrule: "FREQ=DAILY;COUNT=10",
          exdate: exdateArray
        }
      ]
    });
    calendar.render();
  });

核心要求：保证exdate接收的是由合法ISO日期字符串组成的数组，而非包含拼接字符串的单元素数组。

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