注意事项：
- 请务必替换代码中的数据库连接信息和查询语句，以适应您的实际情况。
- 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 (部分代码):
<!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">
<!-- Calendar HTML -->
</div>
<div class="events-container"></div>
</div>
<script>
var event_data = { "events": [] };
$(document).ready(function() {
// ... (您的日历初始化代码)
$.getJSON('consrefeicoes.php', function(datta) {
for (var i = 0; i < datta.length; i++) {
event_data.events.push({
"occasion": datta[i].PequenoAlm,
"invited_count": datta[i].Valencia,
"year": Number(datta[i].Ano),
"month": Number(datta[i].mes),
"day": Number(datta[i].dia),
"cancelled": true
});
}
init_calendar(new Date()); // 数据加载完成后初始化日历
});
// ... (您的其他日历事件处理代码)
});
function init_calendar(date) {
// ... (您的日历初始化函数)
}
function check_events(day, month, year) {
// ... (您的check_events函数)
}
</script>
</body>
</html>总结
通过以上步骤，您已经成功地实现了从数据库加载事件数据并在日历中显示的功能。在实际应用中，您可能需要根据具体需求进行适当的调整和优化。例如，可以添加错误处理机制，优化数据加载速度，以及提供更丰富的用户交互体验。
