FullCalendar两大问题求助：refetchEvents报错与时间显示异常

问题1：调用refetchEvents()触发类型错误 #

• 现象：添加/更新事件时调用refetchEvents()，控制台抛出Uncaught TypeError: Cannot read properties of undefined (reading 'refetchEvents')，事件无法完成更新。
• 原因：全局声明的calendario1变量在DOMContentLoaded回调内被重复用var声明，导致全局变量未被正确赋值——回调内的var会创建局部变量，覆盖全局变量的指向，全局变量始终为undefined。
• 解决办法：移除回调内的var关键字，直接给全局变量赋值：

// 全局作用域声明变量
let calendario1;

document.addEventListener('DOMContentLoaded', function() {
  // 不要用var重新声明，直接赋值给全局变量
  calendario1 = new FullCalendar.Calendar(document.getElementById('calendar'), {
    // 你的日历配置项
  });
  calendario1.render();
});

// 后续调用refetchEvents的示例函数
function refreshCalendarEvents() {
  calendario1.refetchEvents();
}

问题2：UTC时间显示偏差 #

• 现象：数据库返回UTC时间2023-06-16T07:00:00Z，但模态框时间选择器和控制台输出显示为09:00，用moment处理时间时出现该偏移。
• 原因：moment默认会将UTC时间转换为当前本地时区（你的时区为UTC+2），自动加上2小时偏移量。
• 解决办法：根据需求二选一：
  1. 强制显示UTC时间：使用moment.utc()方法解析时间，避免时区转换：

  const dbUtcTime = '2023-06-16T07:00:00Z';
  const utcDisplayTime = moment.utc(dbUtcTime).format('YYYY-MM-DD HH:mm:ss');
  console.log(utcDisplayTime); // 输出 2023-06-16 07:00:00
  

  2. 统一本地时区显示：配置FullCalendar和moment使用一致的时区，FullCalendar可通过timeZone选项设置：

  new FullCalendar.Calendar(document.getElementById('calendar'), {
    timeZone: 'local', // 也可指定具体时区如 'Asia/Shanghai'
    // 其他日历配置
  });
  

  处理时间时明确转换为本地时区：

  const dbUtcTime = '2023-06-16T07:00:00Z';
  const localDisplayTime = moment(dbUtcTime).local().format('YYYY-MM-DD HH:mm:ss');
  console.log(localDisplayTime); // 输出本地时区对应的时间（如UTC+2则为09:00）
  

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