数据库变更后如何在JS中刷新FullCalendar？

核心问题拆解 #

你碰到的两个关键问题：

• refetchEvents 无效果：大概率是事件源未配置重取规则，或初始化时未正确关联数据源
• 移除事件后无法新增：代码存在URL拼接语法错误，且重复添加事件源会导致逻辑异常

先修正明显的语法错误 #

你第二个代码块里的URL参数分隔符写错了，$role 应该改为 &role，否则后端无法正确解析参数：

// 修正后的URL拼接
var url_event='take_events.php?id='+ id +'&role='+ role;

完整修复方案 #

方案1：让refetchEvents生效

如果日历是通过事件源初始化的，必须给事件源配置cache: false，确保每次重取最新数据：

// 初始化日历示例（确保事件源配置正确）
$("#calendar").fullCalendar({
  eventSources: [
    {
      url: 'take_events.php',
      data: function() {
        return { id: id, role: role }; // 动态传递参数
      },
      cache: false // 禁用缓存，强制每次请求最新数据
    }
  ]
});

// 定时刷新逻辑
var auto_refresh = setInterval(function() {
  $("#calendar").fullCalendar('refetchEvents');
}, 10000);

注：如果初始化时没配置事件源，refetchEvents不会生效，因为没有可重取的数据源。

方案2：修复移除+添加事件源的逻辑

避免重复添加事件源，每次操作前先清除旧源，再强制渲染新事件：

var auto_refresh = setInterval(function() {
  var calendar = $("#calendar");
  // 移除所有现有事件
  calendar.fullCalendar('removeEvents');
  // 移除旧的事件源（防止重复添加导致数据冗余）
  calendar.fullCalendar('removeEventSource', 'take_events.php');
  // 拼接正确的请求URL
  var url_event = 'take_events.php?id=' + id + '&role=' + role;
  // 添加新事件源并强制渲染
  calendar.fullCalendar('addEventSource', url_event);
  calendar.fullCalendar('renderEvents');
}, 10000);

也可以直接通过AJAX手动获取数据后更新：

var auto_refresh = setInterval(function() {
  $.get('take_events.php', { id: id, role: role }, function(events) {
    var calendar = $("#calendar");
    calendar.fullCalendar('removeEvents');
    calendar.fullCalendar('addEventSource', events);
    calendar.fullCalendar('renderEvents');
  });
}, 10000);

额外检查项 #

• 确认take_events.php返回的JSON格式符合FullCalendar要求：必须包含title、start等必填字段的数组
• 打开浏览器控制台，查看网络请求是否成功，以及返回的事件数据是否正确
• 若使用FullCalendar v4及以上版本，需注意API语法已更新（上述方案适用于v3及更早版本）

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