如何在WordPress中替换FullCalendar的「more」链接为模态弹出框？

核心思路 #

FullCalendar 3.x提供了事件钩子可拦截「more...」链接的默认行为，通过JavaScript监听点击事件阻止新标签页跳转，再获取当日所有事件，渲染到自定义模态框（popover）中展示。

具体实现步骤 #

1. 拦截默认「more...」跳转行为 #

在FullCalendar初始化配置里，通过eventAfterAllRender钩子绑定自定义点击逻辑，替换默认跳转：

jQuery(document).ready(function($) {
    // 替换为你的FullCalendar容器选择器，比如#widget-fullcalendar
    $('#widget-fullcalendar').fullCalendar({
        // 保留你原有配置（事件来源、视图设置等）
        events: function(start, end, timezone, callback) {
            // 自定义获取WordPress事件（包含已发布/待发布）
            $.ajax({
                url: ajaxurl,
                data: {
                    action: 'get_fullcalendar_events',
                    start: start.format('YYYY-MM-DD'),
                    end: end.format('YYYY-MM-DD')
                },
                success: function(response) {
                    callback(response);
                }
            });
        },
        // 其他配置...

        eventAfterAllRender: function(view) {
            // 遍历所有「more...」链接，替换点击事件
            $('.fc-more').each(function() {
                $(this).off('click').on('click', function(e) {
                    e.preventDefault();
                    var targetDate = $(this).data('date');
                    showEventsPopover(targetDate);
                });
            });
        }
    });
});

2. 编写模态框渲染函数 #

实现showEventsPopover函数，获取指定日期的所有事件，生成样式化列表并弹出模态框：

function showEventsPopover(dateStr) {
    var calendarInstance = $('#widget-fullcalendar').fullCalendar('getCalendar');
    // 筛选指定日期的所有事件
    var dayEvents = calendarInstance.clientEvents(function(event) {
        var eventDate = moment(event.start).format('YYYY-MM-DD');
        return eventDate === dateStr;
    });

    // 生成事件列表HTML
    var eventList = '<ul style="list-style:none; padding:0; margin:12px 0;">';
    dayEvents.forEach(function(evt) {
        // 根据事件状态添加标识样式
        var statusTag = evt.status === 'publish' 
            ? '<span style="background:#46b450; color:#fff; padding:2px 6px; border-radius:3px; font-size:12px;">已发布</span>'
            : '<span style="background:#ffb900; color:#fff; padding:2px 6px; border-radius:3px; font-size:12px;">待发布</span>';
        
        eventList += `
            <li style="padding:8px; border-bottom:1px solid #eee;">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
                    <strong>${evt.title}</strong>
                    ${statusTag}
                </div>
                <small>${moment(evt.start).format('HH:mm')}</small>
                ${evt.description ? `<p style="margin:4px 0 0; font-size:14px;">${evt.description}</p>` : ''}
            </li>
        `;
    });
    eventList += '</ul>';

    // 创建模态框结构
    var modal = `
        <div id="fc-event-modal" style="position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:20px; border-radius:8px; box-shadow:0 0 15px rgba(0,0,0,0.2); z-index:9999; width:90%; max-width:500px;">
            <h3 style="margin-top:0;">${moment(dateStr).format('YYYY年MM月DD日')} 事件</h3>
            ${eventList}
            <button id="fc-modal-close" style="margin-top:15px; padding:8px 16px; background:#ccc; border:none; border-radius:4px; cursor:pointer;">关闭</button>
        </div>
        <div id="fc-modal-overlay" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;"></div>
    `;

    // 插入模态框到页面
    $('body').append(modal);

    // 绑定关闭事件
    $('#fc-modal-close, #fc-modal-overlay').on('click', function() {
        $('#fc-event-modal, #fc-modal-overlay').remove();
    });
}

3. 后台添加事件获取接口（PHP） #

在主题的functions.php中添加AJAX接口，用于获取包含待发布状态的WordPress事件：

add_action('wp_ajax_get_fullcalendar_events', 'get_fullcalendar_events');
add_action('wp_ajax_nopriv_get_fullcalendar_events', 'get_fullcalendar_events');

function get_fullcalendar_events() {
    $start_date = $_GET['start'];
    $end_date = $_GET['end'];

    $events_query = new WP_Query(array(
        'post_type' => 'event', // 替换为你的事件自定义文章类型
        'post_status' => array('publish', 'draft'), // 包含已发布和待发布
        'posts_per_page' => -1,
        'meta_query' => array(
            array(
                'key' => 'event_date', // 替换为你的事件日期字段名
                'value' => array($start_date, $end_date),
                'compare' => 'BETWEEN',
                'type' => 'DATE'
            )
        )
    ));

    $events = array();
    if ($events_query->have_posts()) {
        while ($events_query->have_posts()) {
            $events_query->the_post();
            $events[] = array(
                'title' => get_the_title(),
                'start' => get_post_meta(get_the_ID(), 'event_date', true),
                'description' => get_the_excerpt(),
                'status' => get_post_status()
            );
        }
        wp_reset_postdata();
    }

    wp_send_json($events);
}

4. 注意事项 #

• 确保主题已加载jQuery和Moment.js（FullCalendar 3.x依赖Moment.js），若未加载，可在functions.php中添加：

function enqueue_fc_deps() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('moment', 'https://cdn.jsdelivr.net/momentjs/2.29.1/moment.min.js', array('jquery'), '2.29.1', true);
}
add_action('wp_enqueue_scripts', 'enqueue_fc_deps');

• 若使用的是第三方Widget插件，需确认插件允许自定义FullCalendar配置，或通过wp_add_inline_script将JavaScript代码追加到插件脚本之后。

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