本文档旨在指导开发者如何从数据库中获取事件数据，并将其动态地展示在日历控件上。我们将重点解决数据格式转换、异步加载以及与现有日历代码集成的常见问题，并提供可执行的代码示例，帮助您快速实现数据库驱动的日历功能。
### 前提条件 在开始之前，请确保您已具备以下条件： * 熟悉 HTML、CSS 和 JavaScript 基础知识。 * 了解 jQuery 库的使用。 * 已搭建好 PHP 开发环境，并能连接到您的数据库。 * 拥有一个包含事件数据的数据库表，表中至少包含事件日期（年、月、日）和事件描述等字段。 ### 步骤 1：数据库查询与数据格式化 (PHP) 首先，我们需要使用 PHP 从数据库中查询事件数据，并将结果格式化为 JSON 格式，以便 JavaScript 可以轻松解析。 ```php word = 'your_password'; try { $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password); $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); } catch(PDOException $e) { echo "Connection failed: " . $e->getMessage(); exit; } // 2. 执行数据库查询（请替换为您的查询语句） $Colaborador = $_SESSION['usuarioId']; // 假设用户ID存储在session中 $query = $conn->prepare("SELECT PequenoAlm, Alm, Lan, jant, Ceia, Valencia, YEAR(Data) AS Ano, Colaborador, MONTH(Data) AS mes, DAY(Data) AS dia FROM raddb.MarcErpi WHERE raddb.MarcErpi.Colaborador = ?"); $query->execute([$Colaborador]); // 3. 格式化查询结果为JSON $json = []; while($row = $query->fetch(PDO::FETCH_ASSOC)){ // 使用extract()简化变量赋值 extract($row); $json[] = [ 'PequenoAlm' => (string)$PequenoAlm, 'Alm' => (string)$Alm, 'Lan' => (string)$Lan, 'jant' => (string)$jant, 'Ceia' => (string)$Ceia, 'Valencia' => (string)$Valencia, 'Ano' => (string)$Ano, 'Colaborador' => (string)$Colaborador, 'mes' => (string)$mes, 'dia' => (string)$dia ]; } // 4. 设置Content-Type为application/json，并输出JSON数据 header('Content-Type: application/json'); echo json_encode($json); ?>注意事项：
- 请务必替换代码中的数据库连接信息和查询语句，以适应您的实际情况。
- header('Content-Type: application/json'); 确保浏览器正确解析返回的数据。
- (string)$variable 强制将数据库字段转换为字符串，确保数据类型一致性。
步骤 2：使用 jQuery 从 PHP 获取数据 (JavaScript)
接下来，我们需要使用 jQuery 的 $.getJSON() 方法从 PHP 脚本获取 JSON 数据，并将其存储到 JavaScript 变量中。
var event_data = {
"events": []
};
$(document).ready(function () {
$.getJSON('consrefeicoes.php', function (datta) {
for (var i = 0; i < datta.length; i++) {
PequenoAlm = datta[i].PequenoAlm;
Valencia = datta[i].Valencia;
Ano = datta[i].Ano;
mes = datta[i].mes;
dia = datta[i].dia;
event_data.events.push({
"occasion": PequenoAlm,
"invited_count": Valencia,
"year": Number(Ano), // 转换为数字类型
"month": Number(mes), // 转换为数字类型
"day": Number(dia), // 转换为数字类型
"cancelled": true
});
}
// 数据加载完成后，重新初始化日历
init_calendar(new Date()); // 或者使用当前日历的date对象
});
});关键点：
- $.getJSON('consrefeicoes.php', function (datta) { ... }); 异步加载 JSON 数据。
- Number(Ano), Number(mes), Number(dia) 将从数据库获取的字符串类型的年、月、日转换为数字类型，这对于日历组件的正确渲染至关重要。
- init_calendar(new Date()); 在数据加载完成后，需要重新初始化日历，确保新加载的事件数据能够正确显示。确保 init_calendar 函数能访问到 event_data。
步骤 3：修改 check_events 函数
修改 check_events 函数，使其能够正确地从 event_data 中检索事件。
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;
}注意事项：
- 确保 check_events 函数的参数类型与 event_data 中的数据类型一致。
步骤 4：确保 init_calendar 函数能访问到 event_data
确保 init_calendar 函数可以访问到 event_data 变量。一种方法是在 $.getJSON 的回调函数中调用 init_calendar。
完整示例
将以上代码片段整合到您的项目中，并进行适当的调整，即可实现从数据库加载事件数据并在日历中显示的功能。
index.html (部分代码):
Calendar with Database Events
总结
通过以上步骤，您已经成功地实现了从数据库加载事件数据并在日历中显示的功能。在实际应用中，您可能需要根据具体需求进行适当的调整和优化。例如，可以添加错误处理机制，优化数据加载速度，以及提供更丰富的用户交互体验。
