FullCalendar使用gotoDate跳转指定月份后，prev/next导航按钮显示错误月份的修复咨询

我帮你排查了问题的根源，主要是两个核心问题导致导航按钮出错，下面是具体分析和修复方案：

问题根源 #

1. 月份索引规则混淆：你的selectedMonth状态是0-based（比如0代表1月），但在handleNavigation中，你通过moment(currentDate).format("MM")获取的是1-based的月份值（比如1代表1月）。直接将1-based的月份值用于状态更新和日期计算，会导致状态与日历实际显示的月份完全不匹配，这是导航出错的最主要原因。
2. 手动导航逻辑易出错：你自己实现了prev/next的日期切换逻辑，但手动处理月份跨年的边界情况很容易出现疏漏，不如直接复用FullCalendar内置的成熟导航方法可靠。

修复方案 #

方案一：使用FullCalendar内置导航方法（推荐，简洁且无bug） #

FullCalendar的Calendar API本身提供了prev()和next()方法，已经完美处理了月份切换的所有边界情况，我们只需要调用这些方法，再同步自己的状态即可：

const handleNavigation = (direction) => {
  const calendarApi = calendarRef.current?.getApi();
  if (!calendarApi) return;

  // 直接调用FullCalendar内置的导航方法
  if (direction === "prev") {
    calendarApi.prev();
  } else if (direction === "next") {
    calendarApi.next();
  }

  // 从日历当前日期同步状态，getMonth()返回0-based月份，正好匹配selectedMonth规则
  const currentDate = calendarApi.getDate();
  setSelectedMonth(currentDate.getMonth());
  setSelectedYear(currentDate.getFullYear());
};

同时可以优化你的handleMonthClick函数，去掉不必要的moment依赖：

const handleMonthClick = (monthIndex) => {
  const calendarApi = calendarRef.current?.getApi();
  if (!calendarApi) return;

  const currentDate = calendarApi.getDate();
  const c_year = currentDate.getFullYear();
  const newDate = new Date(c_year, monthIndex, 1);
  
  calendarApi.gotoDate(newDate);
  setSelectedMonth(monthIndex);
  setSelectedYear(c_year);
};

方案二：修复手动导航的月份索引问题（若需自定义导航逻辑） #

如果因为业务需求必须自己实现日期计算，一定要统一使用0-based月份规则，放弃moment的1-based格式：

const handleNavigation = (direction) => {
  const calendarApi = calendarRef.current?.getApi();
  if (!calendarApi) return;

  const currentDate = calendarApi.getDate();
  // 直接用Date对象的0-based月份和年份，避免索引混淆
  let c_year = currentDate.getFullYear();
  let c_month = currentDate.getMonth();

  if (direction === "prev") {
    c_month -= 1;
    if (c_month < 0) {
      c_month = 11;
      c_year -= 1;
    }
  } else if (direction === "next") {
    c_month += 1;
    if (c_month > 11) {
      c_month = 0;
      c_year += 1;
    }
  }

  const newDate = new Date(c_year, c_month, 1);
  calendarApi.gotoDate(newDate);
  setSelectedMonth(c_month);
  setSelectedYear(c_year);
};

验证效果 #

修复后，当你点击某个月份（比如二月，monthIndex=1），再点击prev按钮会正确跳转到一月（selectedMonth=0），点击next会跳转到三月（selectedMonth=2），不会再出现跳转到十二月的错误。

备注：内容来源于stack exchange，提问作者Swapnil Narhire