从数据库获取数据并在日历中显示：完整教程

霞舞

发布时间：2025-10-16 13:36:55

196人浏览过

来源于php中文网

原创

从数据库获取数据并在日历中显示：完整教程

zuojiankuohaophpcnp>本文档旨在指导开发者如何从数据库中获取事件数据，并将其集成到 JavaScript 日历中进行可视化展示。我们将重点讲解如何使用 jQuery 和 PHP 从数据库中提取数据，并将其转换为日历组件能够识别的事件格式，最终实现动态更新日历事件的功能。</p> ### 1. 数据准备与后端接口首先，我们需要一个数据库来存储事件信息，并创建一个 PHP 脚本来从数据库中提取数据，并以 JSON 格式返回。 **数据库表结构示例：** 假设我们有一个名为 `MarcErpi` 的表，用于存储餐点预订信息，包含以下字段： * `PequenoAlm` (早餐): VARCHAR * `Alm` (午餐): VARCHAR * `Lan` (点心): VARCHAR * `jant` (晚餐): VARCHAR * `Ceia` (夜宵): VARCHAR * `Valencia` (地点): VARCHAR * `Data` (日期): DATE * `Colaborador` (预订者): INT **PHP 后端代码 (consrefeicoes.php):** ```php <?php session_start(); // 确保session已启动 $Colaborador = $_SESSION['usuarioId']; // 从session获取用户ID，需要根据你的实际情况修改 $servername = "your_servername"; // 替换为你的数据库服务器名称 $username = "your_username"; // 替换为你的数据库用户名 $password = "your_password"; // 替换为你的数据库密码 $dbname = "your_dbname"; // 替换为你的数据库名称 try { $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $query = $conn->prepare("SELECT PequenoAlm, Alm, Lan, jant, Ceia, Valencia, YEAR(Data) AS Ano, Colaborador, MONTH(Data) AS mes, DAY(Data) AS dia FROM MarcErpi WHERE Colaborador = ?"); $query->execute([$Colaborador]); $json = []; while($row = $query->fetch(PDO::FETCH_ASSOC)) { $json[] = $row; // 直接使用关联数组 } echo json_encode($json); } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); } $conn = null; ?>

代码解释：

连接数据库: 使用 PDO 连接到 MySQL 数据库。
查询数据: 根据当前用户的ID (Colaborador) 查询 MarcErpi 表中的数据。
构建 JSON: 将查询结果转换为 JSON 格式。每一行数据直接作为一个关联数组添加到 $json 数组中。
返回 JSON: 使用 json_encode() 函数将 $json 数组转换为 JSON 字符串并输出。

注意事项：

请替换代码中的数据库连接信息（服务器名称、用户名、密码、数据库名称）为你的实际配置。
确保已启动 PHP 的 session，并且 $_SESSION['usuarioId'] 包含有效的用户ID。
错误处理：添加了 try-catch 块来处理数据库连接和查询可能出现的异常，并在出现错误时输出错误信息。

2. 前端 JavaScript 代码

接下来，我们需要使用 JavaScript (jQuery) 从 PHP 接口获取 JSON 数据，并将其转换为日历组件可以识别的事件格式。

JavaScript 代码：

var event_data = {
    "events": []
};

$(document).ready(function () {
    $.getJSON('consrefeicoes.php', function (data) {
        $.each(data, function (key, val) {
            event_data.events.push({
                "occasion": val.PequenoAlm || val.Alm || val.Lan || val.jant || val.Ceia || "无", // 如果没有值，显示"无"
                "invited_count": val.Valencia,
                "year": Number(val.Ano),
                "month": Number(val.mes),
                "day": Number(val.dia),
                "cancelled": false // 根据实际情况设置
            });
        });
        // 在数据加载完成后初始化日历
        init_calendar(new Date());
    });
});

function check_events(day, month, year) {
    var events = [];
    for (var i = 0; i < event_data["events"].length; i++) {
        var event = event_data["events"][i];
        if (event["day"] === day &&
            event["month"] === month &&
            event["year"] === year) {
            events.push(event);
        }
    }
    return events;
}

代码解释：

初始化 event_data: 创建一个空的 event_data 对象，用于存储从数据库获取的事件数据。
使用 $.getJSON() 获取数据: 使用 jQuery 的 $.getJSON() 方法从 consrefeicoes.php 接口获取 JSON 数据。
遍历 JSON 数据: 使用 $.each() 方法遍历 JSON 数据，并将每个事件转换为日历组件可以识别的格式。
构建事件对象: 为每个事件创建一个对象，包含 occasion (事件名称), invited_count (地点), year (年份), month (月份), day (日期) 和 cancelled (是否取消) 属性。
- occasion 字段使用 val.PequenoAlm || val.Alm || val.Lan || val.jant || val.Ceia || "无" 确保如果早餐、午餐等字段为空，则显示 "无"。
- year、month 和 day 字段使用 Number() 函数将字符串转换为数字。
将事件添加到 event_data: 将创建的事件对象添加到 event_data.events 数组中。
在数据加载完成后初始化日历: 在 $.getJSON() 的回调函数中调用 init_calendar(new Date()) 函数，确保在数据加载完成后再初始化日历。
check_events 函数： 此函数用于检查特定日期是否有事件。它遍历 event_data.events 数组，并将匹配日期（日、月、年）的事件添加到 events 数组中。

注意事项：

确保你已经引入了 jQuery 库。
根据你的日历组件的要求，调整事件对象的属性名称和格式。
month 的值需要进行调整，因为 JavaScript 中 month 的范围是 0-11，而数据库中可能是 1-12。
cancelled 属性可以根据数据库中的实际情况进行设置。

3. 日历组件集成

最后，将 event_data 数据集成到你的日历组件中。具体集成方式取决于你使用的日历组件。你需要修改 show_events 函数，使其能够正确地显示从数据库中获取的事件。

歌者PPT

歌者PPT，AI 写 PPT 永久免费

下载

修改 show_events 函数：

function show_events(events, month, day) {
    $(".events-container").empty();
    $(".events-container").show(250);

    if (events.length === 0) {
        var event_card = $("<div class='event-card'></div>");
        var event_name = $("<div class='event-name'>Não há refeições marcadas para " + day + "  " + month + ".</div>");
        $(event_card).css({
            "border-left": "10px solid #FF1744"
        });
        $(event_card).append(event_name);
        $(".events-container").append(event_card);
    } else {
        for (var i = 0; i < events.length; i++) {
            var event_card = $("<div class='event-card'></div>");
            var event_name = $("<div class='event-name'>" + events[i]["occasion"] + ":</div>");
            var event_count = $("<div class='event-count'>" + events[i]["invited_count"] + "</div>");

            if (events[i]["cancelled"] === true) {
                $(event_card).css({
                    "border-left": "10px solid #FF1744"
                });
                event_count = $("<div class='event-cancelled'>Cancelled</div>");
            }
            $(event_card).append(event_name).append(event_count);
            $(".events-container").append(event_card);
        }
    }
}

代码解释：

此函数接收 events 数组，month 和 day 作为参数。
如果 events 数组为空，则显示一条消息，指示该日期没有预订。
否则，它会遍历 events 数组，并为每个事件创建一个 event-card 元素，并将其添加到 events-container 中。
事件卡片包含事件的名称 (occasion) 和地点 (invited_count)。
如果事件被取消 (cancelled 为 true)，则会在卡片上显示 "Cancelled" 标记。

4. 完整示例代码

以下是完整的示例代码，包括 HTML、CSS 和 JavaScript：

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Calendar with Database Events</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div class="conteent">
        <div class="calendar-container">
            <div class="calendar">
                <div class="year-header">
                    <span class="left-button" id="prev"> &lang; </span>
                    <span class="year" id="label"></span>
                    <span class="right-button" id="next"> &rang; </span>
                </div>
                <div class="year-header">
                    <span class="left-button1" id="prev1"> &lang; </span>
                    <span class="mes" id="label"></span>
                    <span class="right-button1" id="next1"> &rang; </span>
                </div>
                <table class="days-table">
                    <td class="day">Dom</td>
                    <td class="day">Seg</td>
                    <td class="day">Ter</td>
                    <td class="day">Qua</td>
                    <td class="day">Qui</td>
                    <td class="day">Sex</td>
                    <td class="day">Sab</td>
                </table>
                <div class="frame">
                    <table class="dates-table">
                        <tbody class="tbody">
                        </tbody>
                    </table>
                </div>
                <button class="bbuutton" id="add-button">Marcação</button>
            </div>
        </div>
        <div class="events-container"></div>
        <div class="diaalog" id="diaalog">
            <h2 class="diaalog-header"> Adicionar Nova Refeição </h2>
            <form class="fform" id="fform">
                <div class="form-ccontainer" align="center">
                    <p class="form-labeel">Pequenas Refeições <span style="color: red;">*</span></p>
                    <div class="radio_containner">
                        <input type="checkbox" class="inradio" name="reff" id="reff" value="Peq_Almoço">
                        <label for="reff" class="labradio">Pequeno-Almoço</label>
                        <input type="checkbox" class="inradio" name="reff1" id="reff1" value="Lanche">
                        <label for="reff1" class="labradio" style="margin-left: 3%;">Lanche</label>
                        <input type="checkbox" class="inradio" name="reff2" id="reff2" value="Ceia">
                        <label for="reff2" class="labradio" style="margin-left: 3%;">Ceia</label>
                    </div>
                    <p class="form-labeel">Refeição <span style="color: red;">*</span></p>
                    <div class="radio_containner">
                        <input type="checkbox" class="inradio" name="almm" id="almm" value="Almoço">
                        <label for="almm" class="labradio">Almoço</label>
                        <input type="checkbox" class="inradio" name="almm1" id="almm1" value="Almoço_(Dieta)">
                        <label for="almm1" class="labradio" style="margin-left: 3%;">Almoço Dieta</label>
                        <input type="checkbox" class="inradio" name="almm2" id="almm2" value="Jantar">
                        <label for="almm2" class="labradio" style="margin-left: 3%;">Jantar</label>
                        <input type="checkbox" class="inradio" name="almm3" id="almm3" value="Jantar_(Dieta)">
                        <label for="almm3" class="labradio" style="margin-left: 3%;">Jantar Dieta</label>
                    </div>
                    <div class="form-group">
                        <p class="form-labeel"> Valência <span style="color: red;">*</span></p>
                        <select class="js-states form-control ajuste sssinglett" name="valref" id="valref">
                            <option></option>
                            <option value="3" selected> ERPI</option>
                        </select>
                    </div>
                    <label for="Dataref" class="form-labeel">Período de Marcação </label>
                    <input type="date" class="inpuut" name="Dataref" id="Dataref">
                    <div class="ajustebot">
                        <input type="button" value="Cancel" class="bbuutton" id="cancel-button">
                        <input type="button" value="OK" class="bbuutton" id="ok-button">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (style.css):

/*  Events display */

.events-container {
  overflow-y: scroll;
  height: 100%;
  margin: 0px auto;
  font: 13px Helvetica, Arial, sans-serif;
  display: inline-block;
  padding: 0 10px;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

.events-container:after {
  clear: both;
}

.event-card {
  padding: 20px 0;
  width: 350px;
  margin: 20px auto;
  display: block;
  background: #fff;
  border-left: 10px solid #52A0FD;
  border-radius: 3px;
  box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -webkit-box-shadow: 3px 8px 16px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.event-count,
.event-name,
.event-cancelled {
  display: inline;
  padding: 0 10px;
  font-size: 1rem;
}

.event-count {
  color: #52A0FD;
  text-align: right;
}

.event-name {
  padding-right: 0;
  text-align: left;
}

.event-cancelled {
  color: #FF1744;
  text-align: right;
}


/*  Calendar wrapper */

.calendar-container {
  position: relative;
  margin: 0px auto;
  height: 100%;
  background: #fff;
  font: 13px Helvetica, Arial, san-serif;
  display: inline-block;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.calendar-container:after {
  clear: both;
}

.calendar {
  display: table;
}


/* Calendar Header */

.year-header {
  background: #52A0FD;
  background: -moz-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: -webkit-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: linear-gradient(to right, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  font-family: Helvetica;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  height: 40px;
  text-align: center;
  position: relative;
  color: #fff;
  border-top-left-radius: 3px;
}

.year-header span {
  display: inline-block;
  font-size: 20px;
  line-height: 40px;
}

.left-button,
.right-button {
  cursor: pointer;
  width: 28px;
  text-align: center;
  position: absolute;
}

.left-button1,
.right-button1 {
  cursor: pointer;
  width: 28px;
  text-align: center;
  position: absolute;
}

.left-button {
  left: 0;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}

.left-button1 {
  left: 0;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
}

.right-button {
  right: 0;
  top: 0;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
}

.right-button1 {
  right: 0;
  top: 0;
  -webkit-border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
}

.left-button:hover {
  background: #3FADFF;
}

.left-button1:hover {
  background: #3FADFF;
}

.right-button:hover {
  background: #00C1FF;
}

.right-button1:hover {
  background: #00C1FF;
}

.ajustebot {
  margin-top: -5%;
}


/* Buttons */

.bbuutton {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  font-size: 1rem;
  border-radius: 25px;
  padding: 0.65rem 1.9rem;
  transition: .2s ease all;
  color: white;
  border: none;
  box-shadow: -1px 10px 20px #9BC6FD;
  background: #52A0FD;
  background: -moz-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: -webkit-linear-gradient(left, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
  background: linear-gradient(to right, #52A0FD 0%, #00C9FB 80%, #00C9FB 100%);
}

#cancel-button {
  box-shadow: -1px 10px 20px #FF7DAE;
  background: #FF1744;
  background: -moz-linear-gradient(left, #FF1744 0%, #FF5D95 80%, #FF5D95 100%);
  background: -webkit-linear-gradient(left, #FF1744 0%, #FF5D95 80%, #FF5D95 100%);
  background: linear-gradient(to right, #FF1744 0%, #FF5D95 80%, #FF5D95 100%);
}

#add-button {
  display: block;
  position: absolute;
  right: 20px;
  bottom: 20px;
}

#add-button:hover,
#ok-button:hover,
#cancel-button:hover {
  transform: scale(1.03);
}

#add-button:active,
#ok-button:active,
#cancel-button:active {
  transform: translateY(3px) scale(.97);
}


/* Days/months tables */

.days-table,
.dates-table {
  border-collapse: separate;
  text-align: center;
}

.day {
  height: 26px;
  width: 26px;
  padding: 0 10px;
  line-height: 26px;
  border: 2px solid transparent;
  text-transform: uppercase;
  font-size: 90%;
  color: #9e9e9e;
}

.active-month {
  font-weight: bold;
  font-size: 14px;
  color: #FF1744;
  text-shadow: 0 1px 4px RGBA(255, 50, 120, .8);
}


/*  Dates table */

.table-date {
  cursor: default;
  color: #2b2b2b;
  height: 26px;
  width: 26px;
  font-size: 15px;
  padding: 10px;
  line-height: 26px;
  text-align: center;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: all 250ms;
}

.table-date:not(.nil):hover {
  border-color: #FF1744;
  box-shadow: 0 2px 6px RGBA(255, 50, 120, .9);
}

.event-date {
  border-color: #52A0FD;
  box-shadow: 0 2px 8px RGBA(130, 180, 255, .9);
}

.active-date {
  background: #FF1744;
  box-shadow: 0 2px 8px RGBA(255, 50, 120, .9);
  color: #fff;
}

.event-date.active-date {

修复 clientHeight 在窗口缩放时无法正确响应高度变化的问题

HTML 文件分离时 collapsible 无法折叠的解决方案

如何正确协调 mouseDown/mouseUp 与 hover 交互效果

如何正确协调鼠标按下、释放与悬停事件的样式优先级

如何正确协调鼠标按下、释放与悬停事件以避免样式冲突