FullCalendar事件动态加载与导航处理教程

// FullCalendar v3 with jQuery
$(document).ready(function() {
    $('#calendar').fullCalendar({
        // ... 其他配置选项 ...
        eventLimit: true, // 允许在事件过多时显示“更多”链接

        // 关键：将 events 选项设置为您的后端API URL
        // FullCalendar 会自动向此 URL 发送 GET 请求，并附带 start 和 end 日期参数
        events: 'calendarChangeAjax.php', 

        // 如果您需要传递额外的固定参数，可以使用对象形式
        // events: {
        //     url: 'calendarChangeAjax.php',
        //     type: 'GET', // 默认就是 GET，也可以明确指定
        //     data: {
        //         // 例如，如果需要传递用户ID或其他上下文参数
        //         userId: 123
        //     },
        //     error: function() {
        //         alert('加载事件时发生错误！');
        //     }
        // }
    });
});

// populateCalendar 函数不再需要，因为 FullCalendar 会直接处理返回的事件数据
// 如果您需要对事件数据进行预处理，可以使用 events 作为函数的形式

<?php
// calendarChangeAjax.php
// 假设数据库连接 $conn 已建立
// 引入数据库连接文件，例如 require_once 'db_connect.php';

header('Content-Type: application/json'); // 设置响应头为 JSON

// FullCalendar 会通过 GET 请求发送 start 和 end 参数
$start_param = isset($_GET['start']) ? $_GET['start'] : null;
$end_param = isset($_GET['end']) ? $_GET['end'] : null;

$events = []; // 用于存储最终事件数组

// 确保日期参数有效
if ($start_param && $end_param) {
    // 将 ISO 8601 格式的日期字符串转换为数据库可用的日期格式
    // FullCalendar 通常发送 ISO 8601 格式，例如 "2023-10-01T00:00:00Z"
    $start_date = date('Y-m-d H:i:s', strtotime($start_param));
    $end_date = date('Y-m-d H:i:s', strtotime($end_param));

    // 构建 SQL 查询，使用 BETWEEN 过滤日期范围
    // 注意：请使用预处理语句防止 SQL 注入
    $query = "SELECT oa1, oa2, dateAdded FROM supervisorupdate WHERE dateAdded BETWEEN ? AND ? AND status = 0";

    // 示例：使用 mysqli 预处理语句
    if ($stmt = mysqli_prepare($conn, $query)) {
        mysqli_stmt_bind_param($stmt, "ss", $start_date, $end_date);
        mysqli_stmt_execute($stmt);
        $result = mysqli_stmt_get_result($stmt);

        while ($row = mysqli_fetch_assoc($result)) {
            $oa1 = $row['oa1'];
            $oa2 = $row['oa2'];
            $dateAdded = date("Y-m-d", strtotime($row['dateAdded'])); // 仅日期部分

            $singleDetail = $oa1 . $oa2;

            // 按照 FullCalendar 期望的事件对象格式构建
            $events[] = [
                "title" => $singleDetail,
                "start" => $dateAdded, // FullCalendar 可以处理 YYYY-MM-DD 格式
                "color" => "#E0F8E0" // 可以根据需要设置颜色
                // 更多属性如 "end", "url" 等可以按需添加
            ];
        }
        mysqli_stmt_close($stmt);
    } else {
        // 错误处理
        error_log("SQL Prepare Error: " . mysqli_error($conn));
    }
} else {
    // 如果缺少日期参数，可以返回空数组或错误信息
    error_log("FullCalendar did not provide start/end dates.");
}

// FullCalendar 期望一个事件对象数组
echo json_encode($events);
?>

[
    {
      "title": "事件A详情",
      "start": "2023-10-05",
      "end": "2023-10-05",
      "color": "#E0F8E0"
    },
    {
      "title": "事件B详情",
      "start": "2023-10-08T10:00:00",
      "end": "2023-10-08T12:00:00",
      "color": "#E0F8E0"
    },
    // ... 更多事件
]

// FullCalendar v5 示例
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth', // 替代 defaultView
        dayMaxEventRows: 3,          // 替代 eventLimit
        events: 'calendarChangeAjax.php', // 同样指向后端API
    });
    calendar.render();
});