本文档旨在指导开发者如何从数据库中获取事件数据，并将其集成到 javascript 日历中进行可视化展示。我们将重点讲解如何使用 jquery 和 php 从数据库中提取数据，并将其转换为日历组件能够识别的事件格式，最终实现动态更新日历事件的功能。
### 1. 数据准备与后端接口首先，我们需要一个数据库来存储事件信息，并创建一个 PHP 脚本来从数据库中提取数据，并以 JSON 格式返回。**数据库表结构示例：**假设我们有一个名为 `MarcErpi` 的表，用于存储餐点预订信息，包含以下字段：* `PequenoAlm` (早餐): VARCHAR* `Alm` (午餐): VARCHAR* `Lan` (点心): VARCHAR* `jant` (晚餐): VARCHAR* `Ceia` (夜宵): VARCHAR* `Valencia` (地点): VARCHAR* `Data` (日期): DATE* `Colaborador` (预订者): INT**PHP 后端代码 (consrefeicoes.php):**“`phpsetAttribute(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 函数，使其能够正确地显示从数据库中获取的事件。
修改 show_events 函数：
function show_events(events, month, day) { $(".events-container").empty(); $(".events-container").show(250); if (events.length === 0) { var event_card = $(""); var event_name = $("Não há refeições marcadas para " + day + " " + month + "."); $(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 = $(""); var event_name = $("" + events[i]["occasion"] + ":"); var event_count = $("" + events[i]["invited_count"] + ""); if (events[i]["cancelled"] === true) { $(event_card).css({ "border-left": "10px solid #FF1744" }); event_count = $("Cancelled"); } $(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:
Calendar with Database Events
Dom Seg Ter Qua Qui Sex Sab
Adicionar Nova Refeição
Pequenas Refeições *
Refeição *
Valência *
ERPI
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 {
以上就是从数据库获取数据并在日历中显示：完整教程的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530032.html
微信扫一扫 
支付宝扫一扫 
