从数据库加载数据并在日历中显示事件-js教程-PHP中文网

从数据库加载数据并在日历中显示事件

聖光之護

发布： 2025-10-15 10:31:37

原创

275人浏览过

从数据库加载数据并在日历中显示事件

zuojiankuohaophpcnp>本文档旨在指导开发者如何从数据库中获取事件数据，并将其动态地展示在日历控件上。我们将重点解决数据格式转换、异步加载以及与现有日历代码集成的常见问题，并提供可执行的代码示例，帮助您快速实现数据库驱动的日历功能。</p> ### 前提条件在开始之前，请确保您已具备以下条件： * 熟悉 HTML、CSS 和 JavaScript 基础知识。 * 了解 jQuery 库的使用。 * 已搭建好 PHP 开发环境，并能连接到您的数据库。 * 拥有一个包含事件数据的数据库表，表中至少包含事件日期（年、月、日）和事件描述等字段。 ### 步骤 1：数据库查询与数据格式化 (PHP) 首先，我们需要使用 PHP 从数据库中查询事件数据，并将结果格式化为 JSON 格式，以便 JavaScript 可以轻松解析。 ```php <?php // 1. 建立数据库连接（请替换为您的数据库连接信息） $host = 'localhost'; $dbname = 'your_database'; $username = 'your_username'; $password = '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。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

完整示例

将以上代码片段整合到您的项目中，并进行适当的调整，即可实现从数据库加载事件数据并在日历中显示的功能。

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>

登录后复制