Full Calendar最新版：AJAX提交成功后修改事件背景色的实现方案

我来帮你搞定这个需求，其实FullCalendar的事件API已经提供了直接修改事件属性并刷新的方法，结合你的AJAX流程，只需要在请求成功后做几步操作就行，具体步骤如下：

1. 确保事件数据包含唯一ID #

首先要保证你初始化FullCalendar时，每个事件对象都带有唯一的id字段（这个ID要和数据库里的事件ID对应），这样才能精准定位到要修改的事件。示例如下：

jQuery(document).ready(function() {
  var calendar = $('#your-calendar-container').fullCalendar({
    events: [
      {
        id: 'event-123', // 对应数据库中的事件ID
        title: '我的测试事件',
        start: '2024-05-20',
        backgroundColor: '#378006' // 初始背景色
      }
      // 其他事件...
    ],
    // 你的其他配置（比如点击事件弹窗的逻辑）
    eventClick: function(info) {
      // 这里是你打开弹窗的逻辑，记得把当前事件的ID存起来，比如存在弹窗的DOM元素里或者变量中
      $('#event-modal').data('event-id', info.event.id);
      // 填充弹窗的事件信息...
      $('#event-modal').modal('show');
    }
  });
});

2. 在AJAX成功回调中更新事件背景色 #

当你通过弹窗提交AJAX并收到成功响应后，就可以通过FullCalendar的API找到目标事件，修改它的背景色并刷新显示。示例代码如下：

// 假设这是弹窗中提交修改的按钮点击事件
$('#save-event-btn').click(function() {
  const eventId = $('#event-modal').data('event-id'); // 取出之前存储的事件ID
  const newStatus = $('#status-select').val(); // 比如你修改的状态，用来对应不同颜色
  // 根据状态定义颜色（或者直接从后端返回颜色值）
  const newBgColor = newStatus === 'completed' ? '#28a745' : '#dc3545';

  $.ajax({
    url: '/your-update-api', // 你的后端更新接口
    method: 'POST',
    data: {
      event_id: eventId,
      status: newStatus
      // 其他需要修改的字段
    },
    success: function(response) {
      // 获取FullCalendar实例
      const calendar = $('#your-calendar-container').fullCalendar('getCalendar');
      // 通过ID找到目标事件
      const targetEvent = calendar.getEventById(eventId);

      if (targetEvent) {
        // 修改事件的背景色
        targetEvent.setProp('backgroundColor', newBgColor);
        // 如果需要同步修改边框色，可以加上这行
        // targetEvent.setProp('borderColor', newBgColor);
        // 最新版FullCalendar修改属性后会自动渲染，不过手动调用render更保险
        targetEvent.render();
      }

      // 关闭弹窗
      $('#event-modal').modal('hide');
      alert('事件修改成功！');
    },
    error: function() {
      alert('修改失败，请重试');
    }
  });
});

3. 关键注意事项 #

• 实例获取正确：如果你用的是FullCalendar最新的ES6方式初始化（比如new FullCalendar.Calendar(el, options)），那获取实例的方式就是你初始化时保存的变量，不需要用jQuery的fullCalendar('getCalendar')方法。
• 事件ID唯一：一定要保证每个事件的id字段唯一且和数据库对应，否则会找不到目标事件或者修改错事件。
• 属性修改API：除了backgroundColor，你还可以用setProp方法修改事件的其他属性，比如title、start、end等，用法完全一致。

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