CodeIgniter中jQuery FullCalendar CRUD操作问题求助

我来帮你一步步排查这些问题，结合CodeIgniter和FullCalendar的CRUD场景，咱们从数据展示到事件操作逐个解决：

先从最基础的数据源对接开始排查：

• 确认后端接口返回格式符合FullCalendar要求：FullCalendar的events源必须返回特定结构的JSON数组，每个事件至少要包含id、title、start字段（可选end、allDay等）。你可以直接在浏览器访问获取事件的接口（比如your-domain/personalcalendar/get_events），检查返回的JSON是否类似下面的正确格式：

  [
    {"id":1,"title":"项目评审会","start":"2024-05-20T09:00:00","end":"2024-05-20T11:00:00","allDay":false},
    {"id":2,"title":"团建活动","start":"2024-05-25","allDay":true}
  ]
  

  如果返回格式不对，比如字段名不匹配（比如数据库存的是start_date，后端没转成start），或者有语法错误，日历肯定加载不出数据。

• 检查FullCalendar的events配置：确保JS代码里的events属性正确指向后端接口，示例配置如下：

  document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
      // 其他基础配置（比如头部按钮、视图模式）
      events: {
        url: '<?= base_url("personalcalendar/get_events") ?>',
        method: 'GET',
        failure: function() {
          alert('获取事件数据失败，请检查接口');
        }
      }
    });
    calendar.render();
  });
  

  重点确认URL是否正确，CodeIgniter的路由有没有映射到对应的控制器方法。

• 数据库字段与FullCalendar的映射：如果你的数据库时间字段是start_time而不是start，后端必须在查询后重命名字段再返回，比如CodeIgniter控制器里可以这么写：

  public function get_events() {
    $events = $this->db->select('id, title, start_time as start, end_time as end')->get('events')->result();
    echo json_encode($events);
  }
  

1. eventDrop（拖拽更新事件时间） #

先确保事件绑定和Ajax请求逻辑正确：

eventDrop: function(info) {
  if (!confirm('确定要修改这个事件的时间吗？')) {
    info.revert(); // 用户取消后恢复原位置
    return;
  }
  $.ajax({
    url: '<?= base_url("personalcalendar/update_event") ?>',
    type: 'POST',
    data: {
      event_id: info.event.id,
      new_start: info.event.start.toISOString(),
      new_end: info.event.end ? info.event.end.toISOString() : null
    },
    success: function(response) {
      const res = JSON.parse(response);
      if (res.success) {
        alert('事件时间更新成功');
      } else {
        alert('更新失败，请重试');
        info.revert(); // 更新失败恢复原位置
      }
    },
    error: function() {
      alert('请求失败，请检查后端接口');
      info.revert();
    }
  });
}

然后检查后端update_event方法：

public function update_event() {
  $event_id = $this->input->post('event_id');
  $new_start = $this->input->post('new_start');
  $new_end = $this->input->post('new_end');
  
  $update_data = [
    'start_time' => $new_start,
    'end_time' => $new_end
  ];
  
  $this->db->where('id', $event_id);
  $result = $this->db->update('events', $update_data);
  
  echo json_encode(['success' => $result]);
}

注意要返回JSON格式的响应，前端才能正确判断操作结果。

2. eventClick（点击事件执行删除） #

如果是点击事件触发删除操作，参考下面的代码：

eventClick: function(info) {
  if (confirm('确定要删除这个事件吗？')) {
    $.ajax({
      url: '<?= base_url("personalcalendar/delete_event") ?>',
      type: 'POST',
      data: { event_id: info.event.id },
      success: function(response) {
        const res = JSON.parse(response);
        if (res.success) {
          info.event.remove(); // 从日历上移除事件
          alert('事件删除成功');
        } else {
          alert('删除失败，请重试');
        }
      },
      error: function() {
        alert('请求失败，请检查后端接口');
      }
    });
  }
}

后端delete_event方法：

public function delete_event() {
  $event_id = $this->input->post('event_id');
  
  $this->db->where('id', $event_id);
  $result = $this->db->delete('events');
  
  echo json_encode(['success' => $result]);
}

• CSRF防护处理：CodeIgniter默认开启CSRF防护，POST请求必须携带CSRF Token。可以在页面头部添加：

  <meta name="csrf-token" content="<?= $this->security->get_csrf_hash() ?>">
  

  然后在Ajax请求中加入：

  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
  

• 浏览器开发者工具排查：按F12打开开发者工具，查看Console标签有没有JS错误，Network标签查看Ajax请求的状态码（404表示接口不存在，500表示后端报错），还能看到请求参数和返回的响应内容，这是快速定位问题的关键。

• 数据库权限检查：确保你的数据库用户拥有SELECT、UPDATE、DELETE权限，避免因权限不足导致操作失败。

如果按照上面的步骤排查后还是有问题，可以把具体的代码片段贴出来，能更精准地定位问题~

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