本文详细介绍了如何将包含多个事件的php数组正确传递给fullcalendar 3，以在日历中显示动态数据。内容涵盖了fullcalendar事件对象的标准格式、直接通过`json_encode`注入javascript的方法，以及更推荐的通过json事件源（ajax）动态加载事件的最佳实践，旨在提供清晰、专业的集成指南。
FullCalendar 事件数据格式要求
FullCalendar 是一个功能强大的JavaScript日历库，用于在网页上显示事件。为了正确渲染事件，FullCalendar 要求事件数据以特定的JSON数组格式提供。每个事件都应该是一个对象，包含诸如 title（事件标题）、start（开始日期/时间）和可选的 end（结束日期/时间）等属性。
例如，一个包含多个事件的JavaScript数组示例如下：
events: [
{
title: '全天事件',
start: '2021-12-02'
},
{
title: '长期事件',
start: '2021-12-02',
end: '2021-12-04'
},
{
title: '点击跳转Google',
url: 'https://google.com/',
start: '2021-12-24'
}
]
从 PHP 传递多个事件到 FullCalendar
当需要从后端（如PHP）动态生成事件数据时，关键在于将PHP数组转换为FullCalendar能够理解的JSON格式。
1. PHP 数组的正确结构
如果PHP数组需要包含多个事件，每个事件本身也应该是一个关联数组，并且这些事件数组再组成一个主数组。这与FullCalendar期望的JSON数组结构完全对应。
立即学习“PHP免费学习笔记（深入）”；
例如，以下是一个包含多个事件的PHP数组示例：
<?php $arrayDate = [ ["start" => "2021-12-02", "title" => "SG-12345-0 : xx, yy"], ["start" => "2021-12-03", "title" => "SG-156645-0 : aa, bb"], ["start" => "2021-12-02", "title" => "SG-13435-0 : cc, dd"], ["start" => "2021-12-04", "title" => "SG-76864-0 : ee, ff"] ]; ?>
请注意，每个内部数组都包含 start 和 title 键，与FullCalendar的事件对象属性一致。
2. 直接注入 JavaScript
最直接的方法是使用 json_encode() 函数将PHP数组转换为JSON字符串，然后将其直接输出到FullCalendar的JavaScript配置中。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css">
<title>FullCalendar PHP 事件示例</title>
</head>
<body>
<div class="ui container">
<div id="calendar"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
// PHP 数组转换为 JSON 并直接注入
var eventsData = <?php echo json_encode($arrayDate); ?>;
$('#calendar').fullCalendar({
defaultDate: '2021-12-02',
eventLimit: true, // 允许 "更多" 链接当事件过多时
events: eventsData // 使用注入的事件数据
});
});
</script>
</body>
</html>
这种方法适用于事件数量不多、且不需要根据用户操作（如切换月份）动态加载新事件的场景。
3. 推荐方法：JSON 事件源 (AJAX Feed)
对于更复杂、事件数量庞大或需要动态加载事件的应用程序，FullCalendar 推荐使用 JSON 事件源（JSON Feed）的方式。在这种模式下，FullCalendar 会通过 AJAX 向指定的 URL 发送请求，获取事件数据。
工作原理：
- FullCalendar 初始化时，会向配置的 events URL 发送一个 AJAX 请求。
- 请求中会包含 start 和 end 参数，表示当前日历视图的开始和结束日期。
- 服务器端的PHP脚本接收这些参数，查询数据库或其他数据源，然后返回与该日期范围匹配的事件数据，以JSON格式输出。
- 当用户切换日历视图（例如，从当前月份切换到下个月），FullCalendar 会再次发送 AJAX 请求，获取新日期范围内的事件。
JavaScript 配置示例：
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2021-12-02',
eventLimit: true,
events: 'your-events-feed.php' // 指向你的 PHP 事件源脚本
});
});
PHP 事件源脚本 (your-events-feed.php) 示例：
<?php
// 设置响应头为 JSON
header('Content-Type: application/json');
// 获取 FullCalendar 传递的 start 和 end 参数
// 注意：FullCalendar 3 默认传递的是 UNIX 时间戳
$start = $_GET['start'] ?? null;
$end = $_GET['end'] ?? null;
// 在实际应用中，你会根据 $start 和 $end 从数据库查询事件
// 这里使用硬编码数据作为示例
$events = [
["start" => "2021-12-01", "title" => "会议 A"],
["start" => "2021-12-02", "title" => "项目启动"],
["start" => "2021-12-02", "end" => "2021-12-04", "title" => "出差"],
["start" => "2021-12-05", "title" => "演示"],
["start" => "2021-12-10", "title" => "生日派对"],
// 更多事件...
];
// 过滤事件，仅返回在请求日期范围内的事件
// 实际应用中，数据库查询会直接完成此过滤
$filteredEvents = [];
if ($start && $end) {
$start_datetime = new DateTime("@" . $start);
$end_datetime = new DateTime("@" . $end);
foreach ($events as $event) {
$event_start_datetime = new DateTime($event['start']);
// 假设事件没有end日期，则默认持续一天
$event_end_datetime = isset($event['end']) ? new DateTime($event['end']) : (clone $event_start_datetime)->modify('+1 day');
if ($event_start_datetime < $end_datetime && $event_end_datetime > $start_datetime) {
$filteredEvents[] = $event;
}
}
} else {
$filteredEvents = $events; // 如果没有日期范围参数，返回所有事件
}
// 将 PHP 数组编码为 JSON 格式并输出
echo json_encode($filteredEvents);
?>
优点：
- 性能优化： 只加载当前视图所需的事件，减少数据传输量。
- 可伸缩性： 轻松处理大量事件数据。
- 动态性： 用户交互（如切换视图）时自动更新事件。
- 分离关注点： 前端专注于渲染，后端专注于数据提供。
总结与注意事项
- 数据格式是关键： 无论采用哪种方式，PHP 数组最终转换成的 JSON 结构必须严格符合 FullCalendar 的事件对象要求。
- 推荐使用 JSON 事件源： 对于生产环境和需要动态加载的场景，强烈建议采用 AJAX JSON Feed 方式，因为它提供了更好的性能和可维护性。
- 错误处理： 在使用 AJAX Feed 时，务必考虑网络请求失败或服务器返回错误数据的情况，并进行相应的错误处理。
- 时区处理： 在处理日期和时间时，尤其是在跨时区应用中，要特别注意 FullCalendar、JavaScript 和 PHP 之间的时区一致性，以避免显示错误。FullCalendar 3 默认使用 Moment.js 进行日期处理。
- 依赖库： 确保页面中正确引入了 jQuery、Moment.js 和 FullCalendar 的 JavaScript 及 CSS 文件。
通过遵循这些指南，您可以有效地将动态生成的 PHP 事件数据集成到 FullCalendar 中，为用户提供一个功能丰富的日历视图。
以上就是FullCalendar 3：PHP多事件数据传递与最佳实践的详细内容，更多请关注php中文网其它相关文章！