悠悠楠杉
网站页面
FullCalendar3中PHP多事件数据传递教程
11/14
前端日历初始化与 AJAX 数据请求
在前端 HTML 页面中，引入必要的库文件并创建一个容器用于挂载日历：
html
接下来，在 $(document).ready() 中初始化 FullCalendar，并通过 events 属性指定一个 PHP 接口地址，用于获取事件数据：
javascript
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
eventLimit: true,
events: 'get_events.php'
});
这里的 get_events.php 就是我们接下来要编写的后端接口，它负责查询数据库并将结果以 JSON 格式返回给前端。
后端处理：PHP 动态生成事件数据
创建 get_events.php 文件，连接数据库并根据前端传入的时间范围筛选事件。FullCalendar 会自动在请求时附带 start 和 end 参数（Unix 时间戳），我们可以利用它们优化查询性能：
php
<?php
header('Content-Type: application/json');
$host = 'localhost';
$db = 'yourdbname';
$user = 'yourusername';
$pass = 'yourpassword';
try {
$pdo = new PDO("mysql:host=$host;dbname=$db;charset=utf8", $user, $pass);
} catch (PDOException $e) {
die("数据库连接失败: " . $e->getMessage());
}
$start = $GET['start'] ? date('Y-m-d H:i:s', $GET['start']) : date('Y-m-d');
$end = $GET['end'] ? date('Y-m-d H:i:s', $GET['end']) : date('Y-m-d', strtotime('+1 month'));
$sql = "SELECT id, title, start, end, description, color FROM events
WHERE start BETWEEN ? AND ?";
$stmt = $pdo->prepare($sql);
$stmt->execute([$start, $end]);
$events = [];
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$events[] = [
'id' => $row['id'],
'title' => $row['title'],
'start' => $row['start'],
'end' => $row['end'],
'description' => $row['description'],
'color' => $row['color'] ?: '#3a87ad'
];
}
echo json_encode($events);
?>
这样，每当用户切换视图或翻页时，日历都会自动向该接口发起请求，获取对应时间段内的事件数据，并以彩色区块形式渲染出来。
数据扩展与交互优化
为了提升用户体验，你可以在事件点击时弹出详细信息。通过 FullCalendar 的 eventClick 回调函数实现：
javascript
eventClick: function(calEvent) {
alert('事件：' + calEvent.title + '\n描述：' + calEvent.description);
}
此外，若需支持拖拽或修改事件，只需将 editable: true 并监听相应事件，配合额外的 PHP 接口完成数据更新。
整个流程清晰且高效，前后端分离明确，适合中小型项目的快速集成。只要理解了数据流向与格式规范，即可灵活扩展更多业务逻辑。
