本教程详细介绍了如何将包含多个标题和开始日期的php数组数据有效地传递给fullcalendar 3日历组件。文章涵盖了两种主要方法：一是通过直接json编码将php数组注入到javascript配置中，适用于静态或少量事件；二是通过fullcalendar的json事件源机制，利用ajax动态加载事件，这是一种更灵活和推荐的解决方案，尤其适用于大型或动态更新的日历数据。教程提供了具体的代码示例和最佳实践建议，帮助开发者构建功能完善的日历应用。
在现代Web应用中，日历组件如FullCalendar广泛用于展示和管理事件。当数据来源于后端（例如PHP）时，如何将复杂的PHP数组结构转换为FullCalendar可识别的事件格式，是开发者常遇到的挑战。本教程将深入探讨如何高效地将包含多个事件的PHP数组传递给FullCalendar 3。
FullCalendar 3 要求事件数据是一个包含事件对象的数组。每个事件对象至少需要包含 title（事件标题）和 start（事件开始时间）属性。可选地，还可以包含 end（事件结束时间）、url（点击事件跳转链接）等。
例如，一个包含多个事件的JavaScript数组结构如下：
events: [
{
title: 'All Day Event',
start: '2021-12-02'
},
{
title: 'Long Event',
start: '2021-12-02',
end: '2021-12-04'
},
{
title: 'Click for Google',
url: 'https://google.com/',
start: '2021-12-24'
}
]因此，无论PHP数组最初是什么结构，最终都需要转换为这种“数组中包含关联数组（或对象）”的形式，以便FullCalendar能够正确解析。
立即学习“PHP免费学习笔记（深入）”；
对于事件数量不多或事件数据相对静态的场景，可以直接在PHP中构建符合FullCalendar要求的数组，然后将其JSON编码并直接注入到JavaScript代码中。
如果您的PHP数组是 ["2021-12-02" => "SG-12345-0 : xx, yy", ...] 这种键值对形式，其中键是日期，值是标题，您需要将其转换为一个包含多个关联数组的数组，每个关联数组代表一个事件。
原始 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 兼容格式的 PHP 数组：
您需要遍历原始数组（如果它不是直接兼容的），并构建一个新的数组。
<?php
$rawEvents = [
"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"
];
$eventsForFullCalendar = [];
foreach ($rawEvents as $date => $title) {
// 确保日期是唯一的，或者根据业务逻辑处理重复日期
// 此处简单添加，如果日期重复，FullCalendar会显示多个事件
$eventsForFullCalendar[] = [
"start" => $date,
"title" => $title
];
}
// 如果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"]
];
?>使用 json_encode() 函数将PHP数组转换为JSON字符串，然后直接在FullCalendar的 events 配置项中输出。
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css">
<title>FullCalendar PHP Events</title>
</head>
<body>
<div class="ui container">
<div class="ui grid">
<div class="ui sixteen column">
<div id="calendar"></div>
</div>
</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() {
// 假设 $arrayDate 已经如上文所示构建好
var jArray = <?php echo json_encode($arrayDate); ?>;
console.log(jArray); // 可以在控制台查看生成的JSON数据
$('#calendar').fullCalendar({
defaultDate: '2021-12-02',
eventLimit: true, // 允许显示“更多”链接
events: jArray // 直接使用 JSON 编码后的数据
});
});
</script>
</body>
</html>注意事项：
对于动态事件、大量事件或需要根据用户操作（如切换月份）加载不同事件的场景，FullCalendar的JSON事件源机制是更优的选择。这种方法通过AJAX请求动态获取事件数据，提高了性能和灵活性。
在FullCalendar的配置中，不再直接提供 events 数组，而是指定一个URL，FullCalendar将向该URL发起AJAX请求以获取事件数据。
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: '2021-12-02',
eventLimit: true,
events: {
url: 'get-events.php', // 指向你的PHP后端脚本
type: 'GET', // 请求类型，默认为GET
data: {
// 可以在这里传递额外的参数
custom_param: 'some_value'
},
error: function() {
alert('获取事件数据失败!');
}
}
});
});
</script>当FullCalendar需要事件数据时（例如初始化、切换月份、日期范围改变），它会自动向 get-events.php 发送一个AJAX请求。这个请求会包含 start 和 end 参数（ISO 8601格式），表示FullCalendar当前视图的开始和结束日期。
这个PHP脚本负责接收FullCalendar发送的请求，根据 start 和 end 参数从数据库或其他数据源查询相关事件，然后将事件数据以JSON格式返回。
<?php
header('Content-Type: application/json'); // 告知浏览器返回的是JSON数据
// 获取FullCalendar发送的开始和结束日期参数
$start_date = isset($_GET['start']) ? $_GET['start'] : null;
$end_date = isset($_GET['end']) ? $_GET['end'] : null;
// 这里模拟从数据库或其他数据源获取事件数据
// 实际应用中，您会根据 $start_date 和 $end_date 查询数据库
$allEvents = [
["start" => "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-02", "title" => "SG-13435-0 : cc, dd"],
["start" => "2021-12-04", "title" => "SG-76864-0 : ee, ff"],
["start" => "2021-12-10", "title" => "产品发布会", "end" => "2021-12-12"],
["start" => "2021-12-25", "title" => "圣诞节派对"],
];
$filteredEvents = [];
foreach ($allEvents as $event) {
// 简单的日期过滤逻辑
// 实际应用中，应使用更健壮的日期比较方法，例如将日期转换为时间戳或DateTime对象
if ($event['start'] >= $start_date && $event['start'] <= $end_date) {
$filteredEvents[] = $event;
} elseif (isset($event['end']) && $event['end'] >= $start_date && $event['start'] <= $end_date) {
// 考虑跨越事件的过滤
$filteredEvents[] = $event;
}
}
// 将过滤后的事件数据 JSON 编码并输出
echo json_encode($filteredEvents);
?>注意事项：
将PHP数组传递给FullCalendar 3主要有两种策略：直接JSON编码注入和使用JSON事件源。直接注入适用于小型、静态数据集，而JSON事件源则是处理动态、大量事件数据的推荐方法，它提供了更好的性能、可扩展性和用户体验。在选择方法时，请根据您的项目需求和数据特性进行权衡。无论哪种方法，核心都是将PHP数据转换为FullCalendar所期望的事件对象数组格式。
以上就是FullCalendar 3 中 PHP 多事件数据传递教程的详细内容，更多请关注php中文网其它相关文章！
PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
253
收藏
