FullCalendar 6.1.10切换无事件设备时日历未重新渲染求助

核心问题出在你调用calendar.destroy()之后，原日历实例已经完全失效，后续对它调用setOption、refetchEvents都是无效操作。当切换到无事件的机器时，因为没有事件数据的变化触发FullCalendar的自动渲染，旧的日历标题就会残留。

具体修复步骤 #

1. 抽离日历初始化逻辑 #

把日历的初始化代码单独写成一个函数，方便切换机器时重复调用：

function initCalendar(events, machineTitle) {
  // 先清空日历容器（避免残留DOM）
  $('#your-calendar-container').empty();
  
  // 初始化新的日历实例
  return new FullCalendar.Calendar('#your-calendar-container', {
    // 你的日历配置项（比如header、views等）
    headerToolbar: {
      left: 'prev,next today',
      center: `title:${machineTitle}`, // 这里直接绑定机器标题
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    events: events,
    // 其他原有配置...
  }).render();
}

2. 修改changemachine函数逻辑 #

销毁旧日历后，在AJAX成功回调里重新初始化日历，而不是操作已失效的实例：

function changemachine(calendar, direction, itemname='') {
  // 销毁旧日历实例
  if (calendar) {
    calendar.destroy();
  }
  
  const cmach = $('#currmachine').data('currmachine');
  const currmac = {
    currmachine: cmach,
    selecteditem: itemname,
  };
     
  $.ajax({
    url: `${direction}_machine`,
    method: 'GET',
    data: currmac,
    dataType: "json",
    success: function (response) {
      const responseObject = JSON.parse(response);
      const calendarevents = JSON.parse(responseObject.formatted_bookings_json);
      const newMachineTitle = responseObject.machine2BookName;
   
      // 更新页面标题元素
      $('#change_machine h3:first').text(`Booking: ${newMachineTitle}`);
      $('#currmachine').data('currmachine', newMachineTitle);
      $('#timelimit').data('timelimit', responseObject.timelimit);
      
      // 重新初始化日历，传入新事件和标题
      calendar = initCalendar(calendarevents, newMachineTitle);
    },
    error: function () {
      alert('切换机器按钮出错！');
    }
  });
}

3. 额外检查点 #

• 确认#your-calendar-container是你实际的日历容器选择器，替换成自己项目中的ID或类名
• 检查AJAX返回的responseObject.machine2BookName是否确实是正确的新机器标题
• 如果你的日历标题是通过独立DOM元素展示的，确保该元素的选择器正确，且每次切换都能被正确赋值

为什么之前的方法没用？ #

• calendar.destroy()会彻底移除日历的DOM结构和实例对象，之后调用setOption根本找不到有效实例执行
• 当新机器无事件时，refetchEvents因为没有事件数据变化，FullCalendar不会触发重新渲染逻辑
• 直接修改data属性只是更新了DOM存储的数据，不会自动触发日历的标题更新

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