FullCalendar事件动态加载与月份导航教程

$(document).ready(function() {
    $('#calendar').fullCalendar({
        eventLimit: true, // 当事件过多时显示“更多”链接
        events: 'calendarChangeAjax.php', // 后端API的URL
        // 其他FullCalendar配置...
    });
});

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth', // 初始视图为月视图
        dayMaxEventRows: 3, // v5中相当于v3的eventLimit
        events: 'calendarChangeAjax.php', // 后端API的URL
        // 其他FullCalendar配置...
    });
    calendar.render();
});

<?php
// 假设 $conn 已经是一个有效的数据库连接
// include 'db_connection.php'; // 包含数据库连接文件

// FullCalendar会通过GET请求发送start和end参数
// 这些参数是ISO 8601格式的日期字符串
$start_date = $_GET['start'] ?? null;
$end_date = $_GET['end'] ?? null;

$events = [];

if ($start_date && $end_date) {
    // 将ISO 8601日期字符串转换为数据库友好的格式，如果需要
    // 例如，如果数据库字段是DATE类型，可能需要 'YYYY-MM-DD'
    $start_date_formatted = date('Y-m-d', strtotime($start_date));
    $end_date_formatted = date('Y-m-d', strtotime($end_date));

    // 构建查询，筛选处于start_date和end_date之间的事件
    // 注意：FullCalendar的end日期是独占的，即不包含end日期当天的事件。
    // 所以在查询时，通常使用 '< end_date' 或 '<= end_date - 1 day'
    $query = "SELECT oa1, oa2, dateAdded FROM supervisorupdate 
              WHERE dateAdded >= '$start_date_formatted' 
              AND dateAdded < '$end_date_formatted' 
              AND status = 0";

    $queryExecute = mysqli_query($conn, $query);

    if ($queryExecute) {
        while ($row = mysqli_fetch_assoc($queryExecute)) {
            $title = $row['oa1'] . $row['oa2'];
            $start = date("Y-m-d", strtotime($row['dateAdded'])); // 格式化为FullCalendar接受的日期字符串

            // FullCalendar事件对象至少需要 title 和 start 属性
            $events[] = [
                'title' => $title,
                'start' => $start,
                'color' => '#E0F8E0' // 可选：设置事件颜色
                // 更多属性如 'end', 'url', 'className' 等可根据需求添加
            ];
        }
    } else {
        // 数据库查询错误处理
        error_log("Database query failed: " . mysqli_error($conn));
    }
}

// 设置响应头为JSON
header('Content-Type: application/json');
// 输出JSON编码的事件数组
echo json_encode($events);
?>

[
    {
      "title": "事件一",
      "start": "2023-10-05T09:00:00",
      "end": "2023-10-05T18:00:00",
      "color": "#E0F8E0"
    },
    {
      "title": "事件二",
      "start": "2023-10-08",
      "end": "2023-10-10",
      "color": "#E0F8E0",
      "allDay": true // 如果是全天事件
    }
]