FullCalendar通过PHP加载事件失败：无法显示日历事件求助

看起来你遇到的核心问题是FullCalendar最新版本（v5+）的API和旧版本差异很大，你现在用的是旧版的事件加载写法，所以无法正确获取并展示事件。我帮你一步步修正：

一、前端代码的关键修改 #

1. 替换废弃的defaultView配置 #

FullCalendar v5+ 已经把defaultView改成了initialView，先把这个改过来：

// 把原来的
defaultView: 'dayGridMonth',
// 改成
initialView: 'dayGridMonth',

2. 更新events回调函数（最关键的一步） #

旧版的events: function(start, end, timezone, callback)写法在v5+里已经失效，新版使用info对象来传递时间范围，并且用successCallback来返回事件数据。修改后的代码如下：

如果你继续使用jQuery的$.ajax：

events: function(info, successCallback) {
  // 将FullCalendar的时间对象转成unix时间戳传给后端
  const startUnix = Math.floor(info.start.getTime() / 1000);
  const endUnix = Math.floor(info.end.getTime() / 1000);

  $.ajax({
    url: '<?php echo base_url('calendar/get_events') ?>',
    dataType: 'json',
    data: { start: startUnix, end: endUnix },
    success: function(events) {
      // 直接把后端返回的事件数组传给successCallback
      successCallback(events);
    },
    error: function() {
      console.error('加载日历事件失败');
    }
  });
}

注意：要确保你在页面里引入了jQuery，否则$.ajax会报错。如果不想用jQuery，可以用原生的fetch API替代：

用原生Fetch API替代（无需jQuery）：

events: function(info, successCallback) {
  const startUnix = Math.floor(info.start.getTime() / 1000);
  const endUnix = Math.floor(info.end.getTime() / 1000);
  const apiUrl = '<?php echo base_url('calendar/get_events') ?>' + `?start=${startUnix}&end=${endUnix}`;

  fetch(apiUrl)
    .then(response => response.json())
    .then(events => {
      successCallback(events);
    })
    .catch(error => {
      console.error('加载日历事件失败:', error);
    });
}

二、后端CodeIgniter代码的修正 #

你现在的后端硬编码了时间范围，应该改成接收前端传入的start和end参数，这样日历切换月份时才能动态加载对应时间段的事件：

public function get_events() {
  // 取消注释，接收前端传入的时间戳参数
  $start = $this->input->get("start");
  $end = $this->input->get("end");
  
  // 以下代码保持不变，把时间戳转成数据库需要的格式
  $startdt = new DateTime('now');
  $startdt->setTimestamp($start);
  $start_format = $startdt->format('Y-m-d H:i:s');
  
  $enddt = new DateTime('now');
  $enddt->setTimestamp($end);
  $end_format = $enddt->format('Y-m-d H:i:s');
  
  $events = $this->calendar_model->get_events($start_format, $end_format);
  $data_events = array();
  
  foreach($events->result() as $event) {
    $data_events[] = array(
      "id" => $event->event_id,
      "title" => $event->event_title,
      "description" => $event->event_description,
      "end" => $event->event_end,
      "start" => $event->event_start
    );
  }
  
  echo json_encode($data_events);
  exit();
}

三、额外检查项 #

1. 确认FullCalendar依赖正确引入：确保你加载了v5+版本的CSS和JS文件，比如：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>

2. 测试后端接口：直接访问http://你的域名/calendar/get_events?start=1564588800&end=1567267200（对应2019年8月的时间戳），确认返回的JSON格式和你提供的一致，没有语法错误。
3. 检查浏览器控制台：打开F12开发者工具，查看Console标签有没有报错，比如404（接口地址错误）、500（后端代码报错）或者JS语法错误，这些都能帮你快速定位问题。

按照上面的修改，你的日历应该就能正常显示从数据库获取的事件了。

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