FullCalendar技术问题：如何无需点击更多链接获取隐藏事件？

要实现日历加载时直接获取每日隐藏的事件数据，无需依赖moreLinkClick，并在日期槽底部自定义展示（圆形标记/分组项），可以通过以下方式实现：

核心思路 #

FullCalendar没有直接暴露hiddenSegs的全局API，但可以利用视图渲染完成后的钩子，手动按日期分组所有事件，结合dayMaxEvents的配置值筛选出隐藏的事件，再在对应日期单元格中添加自定义展示元素。

具体实现代码 #

calendarOptions = {
  dayMaxEvents: 2,
  eventMaxStack: 2,
  initialView: 'dayGridMonth',
  // 视图加载完成后渲染隐藏事件指示器
  viewDidMount: (info) => renderHiddenEvents(info.calendar),
  // 视图更新（如切换月份）时重新渲染
  viewDidUpdate: (info) => renderHiddenEvents(info.calendar),
  // 其他日历配置项...
};

function renderHiddenEvents(calendar) {
  // 清除之前添加的自定义元素，避免重复渲染
  document.querySelectorAll('.fc-day .hidden-events-indicator').forEach(el => el.remove());
  
  const allEvents = calendar.getEvents();
  const eventsByDate = {};
  const maxVisibleEvents = calendar.options.dayMaxEvents;

  // 按日期分组所有事件
  allEvents.forEach(event => {
    const dateStr = event.start.toISOString().split('T')[0];
    eventsByDate[dateStr] = [...(eventsByDate[dateStr] || []), event];
  });

  // 遍历每个日期，处理隐藏事件
  Object.entries(eventsByDate).forEach(([dateStr, dateEvents]) => {
    if (dateEvents.length > maxVisibleEvents) {
      const hiddenCount = dateEvents.length - maxVisibleEvents;
      const dayCell = document.querySelector(`.fc-day[data-date="${dateStr}"]`);
      
      if (!dayCell) return;

      // 创建自定义圆形指示器（可根据需求改为分组项）
      const indicator = document.createElement('div');
      indicator.className = 'hidden-events-indicator';
      indicator.textContent = hiddenCount;
      // 自定义样式，固定在单元格底部居中
      indicator.style.cssText = `
        position: absolute;
        bottom: 3px;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #1976D2;
        color: #fff;
        font-size: 12px;
        text-align: center;
        line-height: 22px;
        cursor: pointer;
        user-select: none;
      `;

      // 点击指示器可查看隐藏事件详情（自定义逻辑，不用默认弹出层）
      indicator.addEventListener('click', () => {
        const hiddenEvents = dateEvents.slice(maxVisibleEvents);
        console.log(`日期${dateStr}的隐藏事件:`, hiddenEvents);
        // 此处可替换为自定义弹窗、下拉列表等展示方式
      });

      dayCell.appendChild(indicator);
    }
  });
}

关键说明 #

1. 视图钩子的使用：viewDidMount确保日历首次加载时执行渲染，viewDidUpdate处理切换月份、视图等场景下的事件更新。
2. 事件分组逻辑：通过事件的起始日期ISO字符串分组，适配dayGridMonth视图的日期单元格。
3. 自定义展示：示例中用圆形标记显示隐藏事件数量，你可以修改indicator的结构和样式，改成分组标签、小图标等形式。
4. 跨天事件处理：如果存在跨天事件，可额外判断事件的end日期，将事件分到多个日期组中（需根据业务需求调整分组逻辑）。

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