如何将包含多日期数据的JSON字符串转换为可用于Vanilla Calendar Pro的“popups”选项？

前端开发 2026-07-09

我尝试将一个简单的事件列表作为JSON负载，从SQL Server数据库表导入到用Vanilla Calendar Pro创建的日历中。每个事件包含日期和描述。具体来说，我试图将这些事件加载为一个集合，作为日历对象实例化过程中的“popups”选项。

下面的代码块展示了对要包含在“popups”集合中的一对事件的手动输入：

<script src="~/js/VanillaCalendarPro/index.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {
        const { Calendar } = window.VanillaCalendarPro;
        const calendar = new Calendar('#calendar', {
            type: 'multiple',
            displayMonthsCount: 3,
            monthsToSwitch: 1,
            firstWeekday: 0,
            disableDatesPast: true,
            selectionDatesMode: 'multiple-ranged',
            popups: {'2026-05-20': { modifier: 'stylePopup', html: '<div>Test #1</div>' },
                     '2026-05-25': { modifier: 'stylePopup', html: '<div>Test #2</div>' },
                    },
        });
        calendar.init();
    });
</script>

该代码块可以无误地执行并产生期望的结果：

有两个问题：

手动输入大量且持续变化的事件列表是不可持续的。
一天多次重新发布我的项目根本不现实。

正如前所述，我正将来自数据库服务器的事件列表导出为JSON负载，类似如下：

[{"date":"2026-05-20","desc":"Test #1"},{"date":"2026-05-25","desc":"Test #2"}]

有没有办法将该JSON负载转换为可用于“popups”选项的JavaScript对象？换句话说，是否有办法以编程方式将上面显示的简单JSON字符串转换为一个变量，该变量可以传递给“popups”选项，类似于 popups: myEvents,（其中“myEvents”是一个格式正确的JavaScript对象）？

最后，我不清楚“popups”选项需要哪种类型的JavaScript对象。据我所知，所有JavaScript的数组或对象都需要键值对。上面JavaScript代码片段中显示的语法省略了日期值所需的键。在将JSON负载转换时，如何弥补这一省略？

解决方案

你在片段中为 popups 的值只是一个普通对象；该对象的键是日期字符串，值本身也是对象，每个对象都包含相应弹出窗口的属性。

你可以将从数据库接收到的数据从数组转换为上述结构的对象，有多种方法，例如使用 Array#reduce：

   .....
   popups: response.reduce((popups, {date, desc}) =>
       ({...popups, [date]: {modifier: 'stylePopup', html: `<div>${desc}</div>`}}), {})

示例 jsFiddle 或者stack snippet（可能遇到网络问题）：

const response = [{"date":"2026-05-20","desc":"Test #1"},{"date":"2026-05-25","desc":"Test #2"}];
document.addEventListener('DOMContentLoaded', () => {
    const { Calendar } = window.VanillaCalendarPro;
    const calendar = new Calendar('#calendar', {
        type: 'multiple',
        displayMonthsCount: 3,
        monthsToSwitch: 1,
        firstWeekday: 0,
        disableDatesPast: true,
        selectionDatesMode: 'multiple-ranged',
        popups: response.reduce((popups, {date, desc}) =>
            ({...popups, [date]: {modifier: 'stylePopup', html: `<div>${desc}</div>`}}), {})
    });
    calendar.init();
});

<div id="calendar"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/styles/index.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>

JSON