17370845950

本文档旨在指导开发者如何从数据库中获取事件数据，并将其动态地展示在日历控件上。我们将重点解决数据格式转换、异步加载以及与现有日历代码集成的常见问题，并提供可执行的代码示例，帮助您快速实现数据库驱动的日历功能。

### 前提条件 在开始之前，请确保您已具备以下条件： * 熟悉 HTML、CSS 和 JavaScript 基础知识。 * 了解 jQuery 库的使用。 * 已搭建好 PHP 开发环境，并能连接到您的数据库。 * 拥有一个包含事件数据的数据库表，表中至少包含事件日期（年、月、日）和事件描述等字段。 ### 步骤 1：数据库查询与数据格式化 (PHP) 首先，我们需要使用 PHP 从数据库中查询事件数据，并将结果格式化为 JSON 格式，以便 JavaScript 可以轻松解析。 ```php 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 (部分代码):

总结

通过以上步骤，您已经成功地实现了从数据库加载事件数据并在日历中显示的功能。在实际应用中，您可能需要根据具体需求进行适当的调整和优化。例如，可以添加错误处理机制，优化数据加载速度，以及提供更丰富的用户交互体验。