求助：使用jQuery隐藏WP FullCalendar中过期的Booking Request事件

WP FullCalendar 是动态渲染DOM元素的——你的代码在document.ready执行时，日历内部的.fc-toolbar、事件标题等元素还未被生成到页面中，因此jQuery无法选中这些元素。

1. 利用WP FullCalendar的加载完成事件（推荐） #

WP FullCalendar通常会触发自定义事件通知日历加载完成，你可以监听这个事件来确保操作时机正确：

jQuery(document).ready(function($) {
  // 监听日历加载完成的自定义事件
  $(document).on('wpfc_calendar_loaded', function() {
    // 为工具栏添加类
    $('.wpfc-calendar-wrapper form .fc-toolbar').addClass('cal-toolbar');
    
    // 隐藏当前日期之前的"Booking Request"事件
    var today = new Date();
    today.setHours(0, 0, 0, 0); // 重置到当天零点，避免时间干扰
    
    $('.fc-view-container a span.fc-title:contains("Booking Request")').each(function() {
      // 从事件元素获取开始日期（FullCalendar会给事件元素添加data-start属性）
      var eventStartDate = $(this).closest('.fc-event').data('start');
      if (eventStartDate) {
        var eventDate = new Date(eventStartDate);
        if (eventDate < today) {
          $(this).closest('.fc-event').addClass('hidden');
        }
      }
    });
  });
});

2. 用MutationObserver监听DOM变化（备用方案） #

如果上述自定义事件无效，可以通过监听DOM变化来捕获日历元素的生成：

jQuery(document).ready(function($) {
  var calendarWrapper = $('.wpfc-calendar-wrapper')[0];
  if (!calendarWrapper) return;

  // 创建DOM变化观察者
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function() {
      // 处理工具栏元素
      var toolbar = $('.wpfc-calendar-wrapper form .fc-toolbar');
      if (toolbar.length && !toolbar.hasClass('cal-toolbar')) {
        toolbar.addClass('cal-toolbar');
      }

      // 处理历史Booking Request事件
      var today = new Date();
      today.setHours(0, 0, 0, 0);
      $('.fc-view-container a span.fc-title:contains("Booking Request")').each(function() {
        var eventEl = $(this).closest('.fc-event');
        if (eventEl.hasClass('hidden')) return;
        
        var eventDate = new Date(eventEl.data('start'));
        if (eventDate < today) {
          eventEl.addClass('hidden');
        }
      });
    });
  });

  // 监听日历容器内的所有DOM变化
  observer.observe(calendarWrapper, { childList: true, subtree: true });
});

3. 强制隐藏样式（解决内联CSS冲突） #

如果事件的内联样式覆盖了hidden类的效果，在主题CSS中添加强制规则：

.hidden {
  display: none !important;
}

• 检查浏览器开发者工具的Elements面板，确认日历加载完成后的实际DOM结构，避免选择器写错（比如新版FullCalendar可能用.fc-header-toolbar代替.fc-toolbar）。
• 确保jQuery无冲突，代码中用$时需在ready函数中传入参数（如示例中的function($)）。

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