本文档旨在指导开发者如何从数据库中获取事件数据，并将其集成到 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):** ```php word = "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 函数，使其能够正确地显示从数据库中获取的事件。
修改 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
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 { 
