如何设置FullCalendar仅显示当前查看月份的事件流事件

FullCalendar 月视图默认会用前后月的日期凑齐整周网格，请求事件时默认取整个可视日期范围的数据，最终会展示前后月填充日期对应的事件。可通过以下两种方案实现仅展示当前目标月份的事件，无需修改框架源码。

方案1：前端事件过滤（推荐，无需改动后端逻辑） #

核心逻辑是利用月视图自带的目标月份区间属性，在事件渲染前过滤掉非当前月的事件数据。

• 首先通过datesSet钩子实时记录当前查看的目标月份的准确区间，注意区分视图可视范围和目标月实际范围：
  • view.start/view.end：视图实际渲染的可视日期范围（包含前后月填充的日期）
  • view.currentStart/view.currentEnd：当前视图对应的目标时间区间，月视图下就是当月第一天0点到次月第一天0点
• 参考实现代码：

let currentMonthStart = null;
let currentMonthEnd = null;

const calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  datesSet: (info) => {
    // 每次跳转月份、切换视图时更新当前目标月区间
    currentMonthStart = info.view.currentStart;
    currentMonthEnd = info.view.currentEnd;
  },
  events: (fetchInfo, successCallback) => {
    // 可照常请求接口拉取可视范围的全量事件
    fetchEventList({
      start: fetchInfo.start,
      end: fetchInfo.end
    }).then(res => {
      // 过滤仅保留事件开始时间落在目标月份内的项
      const validEvents = res.eventList.filter(event => {
        const eventStart = new Date(event.start);
        return eventStart >= currentMonthStart && eventStart < currentMonthEnd;
      });
      successCallback(validEvents);
    })
  }
});

• 如果不想改动现有事件拉取逻辑，也可以通过事件类名钩子隐藏非当前月事件，配套对应样式即可：

// 配置项中添加
eventClassNames: ({ event }) => {
  const eventStart = event.start;
  if (eventStart < currentMonthStart || eventStart >= currentMonthEnd) {
    return ['hide-non-current-event'];
  }
  return [];
}

/* 配套全局样式 */
.hide-non-current-event {
  display: none !important;
}

• 若需要过滤跨月长事件，可在判断条件中补充事件结束时间的校验规则。

方案2：后端接口过滤（适合大数据量场景） #

如果单月事件量较大，不想拉取多余的前后月事件数据，可以在请求时额外传递目标月份的区间参数，让后端直接返回目标月内的事件：

datesSet: (info) => {
  // 每次跳转月份时更新请求附加参数
  calendar.setOption('extraParams', {
    targetMonthStart: info.view.currentStart.toISOString(),
    targetMonthEnd: info.view.currentEnd.toISOString()
  });
}

后端接口接收到targetMonthStart和targetMonthEnd参数后，仅返回事件开始时间落在该区间内的数据即可，可减少不必要的数据传输。

注意：不要尝试通过showNonCurrentDates: false配置实现该需求，这个配置仅会隐藏前后月填充单元格的日期数字，不会阻止对应位置的事件渲染，无法达到预期效果。

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