本文详细介绍了如何在FullCalendar 3中集成PHP数组数据，提供了两种主要方法：直接将PHP数组JSON编码并嵌入JavaScript，以及通过JSON Event Feed动态加载数据。文章将重点阐述数据格式转换的必要性、每种方法的实现细节、适用场景及其优缺点，旨在帮助开发者高效地在日历应用中展示动态事件。
FullCalendar 3 事件数据格式概述
FullCalendar是一个功能强大的JavaScript日历库，用于在网页上展示交互式日历。它能够显示各种事件，并支持多种数据源。在使用FullCalendar时，理解其期望的事件数据格式至关重要。FullCalendar 3期望的事件数据通常是一个JavaScript对象数组，每个对象代表一个事件，并包含如title（事件标题）、start（开始日期/时间）、end（结束日期/时间）、url（点击事件跳转链接）等属性。
例如，一个基本的事件数组结构如下：
[
{
title: '全天事件',
start: '2021-12-02'
},
{
title: '长期事件',
start: '2021-12-02',
end: '2021-12-04'
},
{
title: '点击跳转谷歌',
url: 'https://google.com/',
start: '2021-12-24'
}
]当我们需要从PHP后端获取数据并将其传递给FullCalendar时，核心任务就是将PHP数组转换为这种JavaScript可识别的JSON格式。
立即学习“PHP免费学习笔记（深入）”；
方法一：直接嵌入JSON编码的PHP数组（适用于小型静态数据集）
对于事件数量较少或数据不经常变动的情况，可以直接在PHP页面中将PHP数组转换为JSON字符串，然后嵌入到FullCalendar的JavaScript配置中。
1. PHP数组准备
首先，确保你的PHP数组结构符合FullCalendar的事件对象要求。如果你的原始PHP数组是日期作为键、标题作为值的关联数组，例如：
$arrayDate = [ "2021-12-02" => "SG-12345-0 : xx, yy", "2021-12-03" => "SG-156645-0 : aa, bb", "2021-12-02" => "SG-13435-0 : cc, dd", // 注意：日期键重复可能导致数据覆盖或需要特殊处理 "2021-12-04" => "SG-76864-0 : ee, ff" ];
这种格式需要转换。FullCalendar期望的是一个包含多个事件对象的数组，每个事件对象都有明确的start和title属性。因此，你需要将上述数组转换为以下结构：
$eventsData = [ ["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"] ];
你可以通过循环原始数组来构建这种结构：
专为中小型企业定制的网络办公软件,富有竞争力的十大特性： 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件，使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件，提供web方式的远程邮件服务。 4、集成语音会议组件，节省长途话费开支。 5、集成手机短信组件，重要信息可直接发送到员工手机。 6、集成网络硬
$originalArray = [
"2021-12-02" => "SG-12345-0 : xx, yy",
"2021-12-03" => "SG-156645-0 : aa, bb",
"2021-12-02" => "SG-13435-0 : cc, dd",
"2021-12-04" => "SG-76864-0 : ee, ff"
];
$eventsData = [];
foreach ($originalArray as $date => $title) {
$eventsData[] = ["start" => $date, "title" => $title];
}2. JSON编码与JavaScript嵌入
使用PHP的json_encode()函数将准备好的$eventsData数组转换为JSON字符串，并直接在JavaScript中输出：
FullCalendar PHP Array Demo
这种方法的优点是实现简单直接，无需额外的AJAX请求。然而，缺点也很明显：所有事件数据都会在页面加载时一次性传输，如果事件数量庞大，会导致页面加载缓慢。
方法二：使用FullCalendar的JSON Event Feed（推荐用于动态或大型数据集）
对于需要动态加载、事件数量较多或需要根据用户操作（如切换月份）按需加载事件的场景，强烈推荐使用FullCalendar的JSON Event Feed机制。这种方法通过AJAX请求从服务器获取事件数据，提高了性能和用户体验。
1. FullCalendar配置
在FullCalendar的配置中，events属性不再是一个JavaScript数组，而是一个指向后端API端点的URL。
FullCalendar JSON Feed Demo
当FullCalendar初始化或用户切换日历视图时，它会自动向events_feed.php发送AJAX请求。这个请求会包含start和end参数（表示当前视图的开始和结束日期），以便后端可以按需返回相关事件。
2. 后端API端点（events_feed.php）实现
在events_feed.php文件中，你需要完成以下任务：
- 接收FullCalendar发送的start和end日期参数。
- 根据这些日期从数据库或其他数据源中查询相关事件。
- 将查询结果格式化为FullCalendar期望的事件对象数组。
- 将格式化后的数组JSON编码，并作为HTTP响应返回。
"2021-12-01", "title" => "项目启动会"],
["start" => "2021-12-02", "title" => "SG-12345-0 : xx, yy"],
["start" => "2021-12-03", "title" => "SG-156645-0 : aa, bb"],
["start" => "2021-12-05", "title" => "团队建设活动"],
["start" => "2021-12-10", "title" => "客户演示"],
["start" => "2021-12-15", "title" => "季度总结"],
["start" => "2021-12-24", "title" => "平安夜派对"],
["start" => "2022-01-05", "title" => "新年规划"]
];
$filteredEvents = [];
if ($start_param && $end_param) {
// 将日期参数转换为DateTime对象进行比较
$start_date = new DateTime($start_param);
$end_date = new DateTime($end_param);
foreach ($allEvents as $event) {
$event_start_date = new DateTime($event['start']);
// 过滤在指定日期范围内的事件
if ($event_start_date >= $start_date && $event_start_date <= $end_date) {
$filteredEvents[] = $event;
}
}
} else {
// 如果没有提供日期参数，返回所有事件（或根据业务逻辑返回默认范围）
$filteredEvents = $allEvents;
}
// 将过滤后的事件数据进行JSON编码并输出
echo json_encode($filteredEvents);
?>这种方法的优势在于：
- 性能优化： 只加载当前视图所需的事件数据，减少了初始页面加载时间。
- 可伸缩性： 能够轻松处理大量事件，因为数据是按需加载的。
- 灵活性： 后端可以根据需要执行复杂的查询和过滤逻辑。
注意事项与最佳实践
- 数据格式严格性： FullCalendar对事件对象的属性名称和数据类型有严格要求（例如，日期格式）。务必确保PHP端生成的数据符合这些规范。
- 错误处理： 在JSON Event Feed方法中，后端API应妥善处理错误情况（如数据库连接失败、无效参数），并返回有意义的错误信息。
- 安全性： 如果事件数据来自用户输入，务必在存储和显示之前进行适当的验证和清理，以防止XSS攻击。
- 时区处理： 在处理跨时区事件时，需要特别注意FullCalendar和后端PHP的时区配置，以避免日期/时间显示不一致的问题。FullCalendar支持ISO 8601格式的日期字符串，推荐使用此格式。
- FullCalendar版本： 本教程基于FullCalendar 3。FullCalendar 4及更高版本在API和配置上可能存在差异，请查阅相应版本的官方文档。
总结
将PHP数组数据集成到FullCalendar中，主要有两种策略：直接嵌入JSON编码的PHP数组和利用JSON Event Feed。对于小型、静态的事件集，直接嵌入简单高效；而对于大型、动态或需要按需加载的事件集，JSON Event Feed是更优的选择，它通过异步加载提升了性能和用户体验。无论选择哪种方法，核心都在于将PHP数据正确地转换为FullCalendar期望的JSON事件对象数组格式。通过理解并实践这些方法，开发者可以有效地构建功能丰富的日历应用。
