如何在WordPress中动态生成JSON对象数组为Simple Calendar插件提供事件数据

整体分为PHP后端数据预处理、JS前端生成事件配置两个步骤实现：

1. PHP后端数据处理（主题/插件功能文件中编写） #

你已经从数据库读取到事件数组后，使用WordPress官方推荐的wp_localize_script方法将数据安全传递到前端JS，避免硬编码嵌入代码：

// 替换为你自己从数据库查询得到的事件数组，字段对应你存储的Date、Now、Event name
$raw_events = your_database_query_function(); 

// 预处理为前端可直接读取的纯数据格式
$processed_events = [];
foreach ($raw_events as $ev) {
    $processed_events[] = [
        'date' => $ev['Date'],
        'time' => $ev['Now'],
        'event_name' => $ev['Event name']
    ];
}

// 注册并加载你的日历JS脚本，替换为你实际的脚本路径
wp_enqueue_script('dashboard-calendar', get_template_directory_uri() . '/assets/js/calendar-init.js', ['jquery'], '1.0.0', true);

// 将事件数据注入到前端JS，前端可通过calGlobal.events访问
wp_localize_script('dashboard-calendar', 'calGlobal', [
    'events' => $processed_events
]);

2. 前端JS初始化日历（对应上述的calendar-init.js文件中编写） #

遍历后端传递的事件数组，生成符合插件要求的事件配置列表后传入插件初始化参数：

jQuery(function($) {
    // 初始化事件配置数组
    let eventList = [];

    // 遍历后端传入的事件数据生成配置
    if (calGlobal?.events?.length) {
        calGlobal.events.forEach(item => {
            eventList.push({
                startDate: new Date(`${item.date}T${item.time}`),
                endDate: new Date(`${item.date}T${item.time}`),
                summary: `Appointment with con ${item.event_name}`
            });
        });
    }

    // 初始化日历插件，替换为你实际的日历容器选择器，其他原有配置保持不变
    $('#calendar-container').simpleCalendar({
        // 其他你已有的配置项...
        events: eventList
    });
});

注意事项 #

• 请确保数据库中Date字段格式为YYYY-MM-DD、Now字段格式为HH:mm或HH:mm:ss，避免拼接后生成无效的Date对象
• 如果你的事件数组是PHP索引数组，只需调整遍历逻辑中的字段名对应你实际存储的位置即可

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