如何将多日期JSON字符串转换为Vanilla Calendar Pro的popups可用格式？

先明确Vanilla Calendar Pro Popups的结构要求 #

Vanilla Calendar Pro的popups配置项是一个键值对对象：

• 键：必须是YYYY-MM-DD格式的日期字符串（和你数据库导出的date字段格式完全匹配，无需额外转换）
• 值：支持两种形式：
  1. 直接传入字符串（作为弹窗显示的内容）
  2. 传入配置对象，比如{ content: '事件描述', className: 'custom-popup' }（方便后续扩展自定义样式）

你的需求仅需展示描述，两种形式都适用，推荐第二种更灵活。

转换SQL导出的JSON到Popups格式 #

假设你已经通过接口或本地变量拿到了数据库导出的JSON数据，用Array.reduce()就能快速转换成符合要求的对象：

基础转换示例 #

// 从数据库获取的原始事件数据
const dbEvents = [
  {"date":"2026-05-20","desc":"Test #1"},
  {"date":"2026-05-25","desc":"Test #2"}
];

// 转换为Vanilla Calendar Pro所需的popups格式
const calendarPopups = dbEvents.reduce((acc, event) => {
  acc[event.date] = {
    content: event.desc
    // 可选：添加className自定义弹窗样式
    // className: 'custom-event-popup'
  };
  return acc;
}, {});

// 实例化Vanilla Calendar Pro
const calendar = new Calendar('#calendar', {
  // 其他基础配置（比如日历类型、语言等）
  type: 'month',
  popups: calendarPopups
});

处理重复日期的场景 #

如果数据库存在同一天的多个事件，上述代码会覆盖之前的内容，你可以修改为合并描述：

const calendarPopups = dbEvents.reduce((acc, event) => {
  if (acc[event.date]) {
    // 已有该日期的事件，用换行分隔追加描述
    acc[event.date].content += `<br>${event.desc}`;
  } else {
    acc[event.date] = { content: event.desc };
  }
  return acc;
}, {});

动态加载的完整流程 #

如果是从后端API异步获取数据，完整实现示例：

// 从后端接口拉取事件数据
fetch('/api/get-calendar-events')
  .then(response => response.json())
  .then(dbEvents => {
    // 转换格式
    const calendarPopups = dbEvents.reduce((acc, event) => {
      acc[event.date] = { content: event.desc };
      return acc;
    }, {});
    // 实例化日历
    new Calendar('#calendar', {
      type: 'month',
      popups: calendarPopups
      // 其他自定义配置...
    });
  })
  .catch(error => console.error('事件加载失败:', error));

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