活动预订日历故障：数据库已注册活动无法在日历展示

核心问题总结 #

• 初始代码数据结构错误：把所有活动的属性（occasion、year等）打包成数组塞进单个event对象，但日历组件要求每个活动对应一个独立的event对象。
• 异步加载时序问题：改进版代码中$.getJSON是异步操作，日历初始化逻辑（未在提供代码中展示）大概率在数据加载完成前就执行了，此时event_data.events仍是空数组。
• 活动名称为空问题：部分数据库返回的PequenoAlm为空，直接作为occasion会导致日历无有效显示内容。

修正后的代码实现 #

1. 前端JS代码（修复异步时序与数据结构）

$(document).ready(function () {
  // 在请求回调中处理日历初始化，确保数据加载完成后再渲染
  $.getJSON('consrefeicoes.php', function (datta) {
    const event_data = {
      "events": datta.map(item => {
        // 合并多个餐点字段，生成有意义的活动名称
        const occasions = [];
        if (item.PequenoAlm) occasions.push(item.PequenoAlm);
        if (item.Alm) occasions.push(item.Alm);
        if (item.Lan) occasions.push(item.Lan);
        if (item.jant) occasions.push(item.jant);
        if (item.Ceia) occasions.push(item.Ceia);
        
        return {
          "occasion": occasions.join(', '), // 用逗号分隔多个餐点
          "invited_count": item.Valencia,
          "year": Number(item.Ano),
          "month": Number(item.mes),
          "day": Number(item.dia),
          "cancelled": false // 根据实际业务调整，未取消的活动设为false
        };
      }).filter(event => event.occasion !== '') // 过滤无有效活动名称的条目
    };

    // 在此处执行日历初始化逻辑，传入event_data
    // 示例：initCalendar(event_data);
  }).fail(function(jqXHR, textStatus, errorThrown) {
    // 捕获请求异常，便于调试后端接口问题
    console.error('活动数据加载失败:', textStatus, errorThrown);
  });
});

2. PHP后端代码优化（简化字段处理）

无需手动转换每个字段类型，PDO结果可直接存入数组，json_encode会自动处理类型转换：

session_start(); // 确保开启会话以获取用户ID
$Colaborador = $_SESSION['usuarioId'];

$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 Colaborador = ?");

$query->execute([$Colaborador]);

// 直接获取所有结果，省略手动循环的冗余操作
$json = $query->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($json);

关键修复点说明 #

• 异步时序修复：将日历初始化逻辑放在$.getJSON的成功回调内，确保数据库数据加载完成后，再把event_data传递给日历组件。
• 数据结构修正：通过map方法将每条数据库记录转换为独立的event对象，匹配日历组件的格式要求。
• 空活动名称处理：合并多个餐点字段生成有效活动名称，同时过滤无内容的条目，避免日历显示空值。
• 错误排查优化：添加fail回调捕获请求异常，快速定位后端接口的问题。

内容的提问来源于stack exchange，提问作者Bruno