使用fullCalendar resourceTimeGrid展示MySQL房间预订事件失败排查

1. 资源（Resource）配置检查 #

• 确保script.js中正确配置了3个房间的资源项，且每个资源的id与schedule_list表中存储的房间标识字段（比如room_id）完全匹配：

  resources: [
    { id: '1', title: '房间1' },
    { id: '2', title: '房间2' },
    { id: '3', title: '房间3' }
  ]
  

• 确认index.php中已引入fullCalendar资源视图必需的插件：resource-timegrid.js，此插件是resourceTimeGrid视图正常工作的前提，不能遗漏。

2. 事件数据源与返回格式检查 #

• 检查script.js中events属性是否正确指向事件获取接口（比如新增get_events.php专门负责拉取数据，或复用现有接口），请求路径和方法不能出错：

  events: {
    url: 'get_events.php',
    method: 'GET'
  }
  

• 验证接口返回的JSON数据必须完全符合fullCalendar的事件规范，核心字段缺一不可：
  • id：事件唯一ID
  • start：ISO格式的开始时间（如2024-05-20T09:00:00，注意T分隔符）
  • end：ISO格式的结束时间
  • title：事件标题
  • resourceId：关联的房间ID（必须和资源配置中的id严格对应）
    常见错误：数据库存储的时间格式是2024-05-20 09:00:00，未转换为ISO格式；返回字段用room_id而非resourceId导致映射失败。

3. 数据库字段与前端映射检查 #

• 查看save_schedule.php的插入逻辑，确认房间ID是否存入了与前端resourceId对应的字段（比如表中字段是resource_id还是room_id，必须前后端统一）。
• 确认schedule_list表的start、end字段为datetime类型，且接口返回时未被错误截断或格式化。

4. 浏览器控制台调试 #

• 按F12打开开发者工具，切换到Network标签：
  • 刷新页面，检查事件请求的状态码是否为200，是否成功拉取到数据
  • 查看返回的JSON内容，检查是否存在语法错误、字段缺失或值类型错误
• 切换到Console标签，查看是否有fullCalendar抛出的报错（比如资源ID不匹配、日期格式无效等）

5. 视图模式配置检查 #

• 确认script.js中日历初始化时，正确设置了默认视图为resourceTimeGrid系列：

  initialView: 'resourceTimeGridDay', // 或resourceTimeGridWeek
  

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