如何将PHP循环转换为适配Full Calendar JS的JSON循环？

嘿，我来帮你搞定这个对接问题！其实核心就是把数据库里的事件数据整理成FullCalendar能识别的JSON格式，步骤很简单，我给你一步步拆解：

1. 先把数据库数据整理成PHP数组 #

首先你需要初始化一个空数组，然后在循环里把每一条事件数据按照FullCalendar要求的字段格式存进去。注意字段名要和FullCalendar的事件对象对应（比如id、title、start这些都是官方规定的字段）：

<?php
// 假设$DB已经是你连接好的MySQL数据库对象
$query = "SELECT * FROM events"; 
$listEvents = mysqli_query($DB, $query); 

// 初始化空数组存放所有事件
$eventsArray = [];

while($row = mysqli_fetch_array($listEvents)) { 
    // 按照FullCalendar的格式组装单个事件
    $singleEvent = [
        'id' => $row['event_id'],
        'title' => $row['event_name'],
        'start' => $row['event_start'], // 这里要确保日期格式是ISO8601，比如'2024-05-20'或'2024-05-20T14:30:00'
        'end' => $row['event_end'],
        'url' => $row['event_root']
    ];
    // 把单个事件加入数组
    $eventsArray[] = $singleEvent;
}
?>

2. 把PHP数组转成JSON输出 #

接下来你需要把这个数组转换成JSON格式，这里分两种场景：

场景A：PHP和HTML在同一个文件里 #

如果你的FullCalendar代码和PHP代码在同一个页面，直接把数组转成JSON嵌入到JS里就行：

document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        // 你的其他日历配置，比如主题、视图模式等
        events: <?php echo json_encode($eventsArray, JSON_UNESCAPED_UNICODE); ?>
    });
    calendar.render();
});

场景B：单独的PHP接口文件 #

如果想把数据接口和前端页面分离，就把PHP代码单独存成一个文件（比如events.php），然后在末尾加上JSON输出的代码：

// 在刚才的循环结束后添加这两行
header('Content-Type: application/json'); // 告诉浏览器返回的是JSON数据
echo json_encode($eventsArray, JSON_UNESCAPED_UNICODE); // 转成JSON，保留中文不转义

然后在FullCalendar里通过URL请求这个接口：

document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        // 其他配置项
        events: 'events.php' // 这里填你的PHP接口文件路径
    });
    calendar.render();
});

重要注意事项 #

• 日期格式：FullCalendar要求start和end字段必须是ISO8601格式（比如YYYY-MM-DD或YYYY-MM-DDTHH:MM:SS）。如果你的数据库里的日期格式不是这个，可以用PHP的strtotime和date函数转换：

  'start' => date('Y-m-d\TH:i:s', strtotime($row['event_start'])),
  

• 中文编码：如果你的事件名称有中文，一定要加上JSON_UNESCAPED_UNICODE参数，避免中文被转成Unicode编码。

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