如何在FullCalendar Scheduler中展示数据库返回的JSON事件数据？

在FullCalendar Scheduler中，尝试通过为events配置url属性调用PHP接口获取数据库中的公司数据，希望展示在蓝色的“Company”资源时间轴上，但该方式未生效，无法显示公司名称，且点击该时间轴会跳转到新页面。

用户当前使用的FullCalendar配置代码：

resources: [
        { id: 'a', title: 'Company' },
        { id: 'b', title: 'Activity'},
        { id: 'c', title: 'Driver', eventColor: 'orange' },
        { id: 'd', title: 'Summon', eventColor: 'red' }
      ],
      events:[
        {
          resourceId: 'a', 
          url:'comp.php',
          start: '2022-11-06T00:00:00', 
          end: '2023-11-08T23:00:00',
          color: 'yellow'
        },
        { id: '2', 
          resourceId: 'b', 
          url: 'activity.php' ,
          start: '2022-11-06T02:00:00', 
          end: '2022-11-08T18:00:00',
          color: 'pink'
        }
      ]

PHP接口代码：

<?php

include "db.php";
          
$data = array();
$sql = "SELECT * FROM company";
$stmt = $mysqli_conn->prepare($sql);
$stmt->execute();

$result = $stmt->get_result();
            
foreach($result as $row)
{
  $data[] = array(
    "id"   => $row["id"],
    "title"   => $row["comp_name"]
  );
}

echo json_encode($data);

$stmt->close();

?>

1. events配置逻辑错误：当前给events数组内的单个事件设置url，这是给单个事件添加跳转链接的用法，并非加载远程事件列表的正确方式。FullCalendar加载远程事件需将events直接指定为接口URL，或通过eventSources分资源配置数据源。
2. PHP接口返回数据不完整：FullCalendar事件需至少包含title、start（或end）、resourceId字段才能正确渲染到对应资源轴上，当前接口仅返回id和title，缺少必要字段。
3. 点击跳转问题：单个事件的url属性会触发点击跳转，这是该属性的默认行为，并非加载数据的正确用法。

1. 调整FullCalendar事件数据源配置 #

使用eventSources分资源配置数据源，确保“Company”资源加载对应接口的数据：

resources: [
  { id: 'a', title: 'Company' },
  { id: 'b', title: 'Activity'},
  { id: 'c', title: 'Driver', eventColor: 'orange' },
  { id: 'd', title: 'Summon', eventColor: 'red' }
],
eventSources: [
  // 绑定Company资源的事件数据源
  {
    url: 'comp.php',
    resourceId: 'a',
    color: 'yellow'
  },
  // 绑定Activity资源的事件数据源
  {
    url: 'activity.php',
    resourceId: 'b',
    color: 'pink'
  }
]

2. 修改PHP接口返回完整事件数据 #

补充FullCalendar所需的resourceId、start、end字段（可根据业务逻辑动态设置时间范围）：

<?php
include "db.php";

$data = array();
$sql = "SELECT * FROM company";
$stmt = $mysqli_conn->prepare($sql);
$stmt->execute();
$result = $stmt->get_result();

foreach($result as $row)
{
  $data[] = array(
    "id" => $row["id"],
    "title" => $row["comp_name"],
    "resourceId" => "a", // 指定归属Company资源
    "start" => "2022-11-06T00:00:00", // 可替换为数据库中的时间字段
    "end" => "2023-11-08T23:00:00" // 可替换为数据库中的时间字段
  );
}

echo json_encode($data);
$stmt->close();
?>

3. 移除点击跳转行为 #

删除事件配置中的url属性，若需自定义点击事件逻辑，可使用eventClick回调：

eventClick: function(info) {
  // 自定义点击逻辑，例如弹窗展示公司详情
  console.log('点击了事件：', info.event.title);
  // 若仍存在url属性，可通过此阻止默认跳转
  info.jsEvent.preventDefault();
}

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