当前位置：首页 > 问答 > 正文

php查数据库的数据怎么放到日历里显示，求简单点的办法啊

太叔访天
问答
2026-01-12 09:55:37
4

用PHP把数据库的数据捞出来

假设你有一个数据库表，就叫它 events 吧，里面至少要有这些字段：id（事件ID），title），start_date（事件开始日期）。

连接你的数据库，然后把数据查出来,这里用最简单的PHP代码示例：

<?php
// 连接数据库，把your_username、your_password、your_dbname换成你自己的
$conn = new mysqli("localhost", "your_username", "your_password", "your_dbname");
// 检查连接有没有成功
if ($conn->connect_error) {
    die("连接失败： " . $conn->connect_error);
}
// 设置字符集，避免中文乱码
$conn->set_charset("utf8");
// 写SQL语句，从events表里查数据
$sql = "SELECT id, title, start_date FROM events";
$result = $conn->query($sql);
// 创建一个空数组，用来装事件数据
$events = array();
// 如果查询结果有数据
if ($result->num_rows > 0) {
    // 循环遍历每一行数据
    while($row = $result->fetch_assoc()) {
        // 把每一行数据都加到$events数组里
        $events[] = $row;
    }
}
// 关闭数据库连接
$conn->close();
// $events数组里就装满了我们从数据库里取出来的事件数据了。
// 我们需要把这些数据转换成日历插件能看懂的样子。
?>

关键点：现在数据在 $events 这个PHP数组里了，但日历插件（通常是前端JavaScript的）不认识PHP数组，它只认识一种叫做JSON的数据格式,我们需要把这个PHP数组转换成JSON。

第二步：选个日历插件，把数据喂给它

市面上有很多好用的日历插件，FullCalendar 就是个非常强大且流行的选择,咱们就以它为例。

你需要在你的HTML页面里引入FullCalendar需要的CSS和JavaScript文件，这些文件你可以下载到本地，也可以直接使用在线的CDN链接，这里用CDN,最简单。

在页面上画一个地方给日历显示，比如一个 <div>。

写点JavaScript代码，初始化日历,并告诉它数据从哪里来。

下面是完整的HTML页面示例（假设这个文件和上面的PHP代码在同一个目录，并且保存为 calendar.php）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的事件日历</title>
    <!-- 引入FullCalendar的CSS -->
    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css" rel="stylesheet">
    <style>
        /* 给日历容器定个大小 */
        #calendar {
            max-width: 900px;
            margin: 40px auto;
        }
    </style>
</head>
<body>
    <!-- 这就是日历要显示的位置 -->
    <div id="calendar"></div>
    <!-- 引入jQuery（FullCalendar依赖它）和FullCalendar的JS -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
    <!-- 如果需要中文显示，再引入语言包 -->
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales/zh-cn.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 找到我们刚才画的日历容器
            var calendarEl = document.getElementById('calendar');
            // 创建并初始化日历
            var calendar = new FullCalendar.Calendar(calendarEl, {
                // 设置初始视图，比如月视图
                initialView: 'dayGridMonth',
                // 设置语言为中文
                locale: 'zh-cn',
                // 最关键的部分：事件源（数据从哪里来）
                events: {
                    // 这里是一个PHP文件的URL，这个文件会返回JSON数据
                    url: 'get_events.php', // 我们需要创建这个文件
                    method: 'GET'
                }
            });
            // 渲染日历
            calendar.render();
        });
    </script>
</body>
</html>

注意看上面JavaScript代码里的 events 部分，它指向一个叫 get_events.php 的文件，这个文件就是我们下一步要创建的“数据提供者”。

第三步：创建专门输出JSON数据的PHP文件

我们不能再主页面里直接混着写，最好创建一个独立的PHP文件（比如叫 get_events.php），它的任务只做一件事：连接数据库，查询事件，然后把数据以JSON格式echo（输出） 出来。

创建 get_events.php 文件,内容如下：

<?php
// 设置HTTP响应头，告诉浏览器返回的是JSON格式的数据，而不是HTML
header('Content-Type: application/json');
// 这里就是第一步的数据库连接和查询代码，几乎原样拷贝过来
$conn = new mysqli("localhost", "your_username", "your_password", "your_dbname");
if ($conn->connect_error) {
    die("连接失败： " . $conn->connect_error);
}
$conn->set_charset("utf8");
$sql = "SELECT id, title, start_date as start FROM events"; // 注意：这里把`start_date`别名成了`start`，因为FullCalendar要求字段名叫`start`
$result = $conn->query($sql);
$events = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $events[] = $row;
    }
}
$conn->close();
// 最关键的一步：把PHP数组 $events 编码（转换）成JSON字符串，并输出
echo json_encode($events);
?>

这里有个非常重要的细节：FullCalendar插件对JSON数据的字段名有要求，它要求事件的开始时间字段名必须是 start，所以我们在SQL查询里用了 start_date as start，这样数据库里的 start_date 字段在变成JSON后，名字就变成了 start，日历插件就能认出来了，如果你的数据库里还有结束时间字段（end_date），你也需要别名成 end。

总结一下整个流程：

准备数据：get_events.php 文件从数据库读出数据,并转换成JSON格式。
显示日历：calendar.php 这个主页面加载了FullCalendar插件。
数据对接：主页面里的JavaScript告诉FullCalendar：“你去 get_events.php 这个地址拿数据吧”，FullCalendar就会自动发起一个请求，拿到JSON数据,然后漂亮地把事件显示在日历上。

这个办法的好处是：