FullCalendar 3：PHP多事件数据传递与最佳实践-php教程-PHP中文网

FullCalendar 3：PHP多事件数据传递与最佳实践

碧海醫心

发布： 2025-11-05 11:02:25

原创

918人浏览过

FullCalendar 3：PHP多事件数据传递与最佳实践

本文详细介绍了如何将包含多个事件的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配置中。

Natural Language Playlist

探索语言和音乐之间丰富而复杂的关系，并使用 Transformer 语言模型构建播放列表。

查看详情

<!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中文网其它相关文章！