Fullcalendar v6.1.5：如何限制仅可切换至当前年份后1年？

直接用官方提供的validRange配置就能解决这个问题，这比单独禁用按钮靠谱得多——毕竟只禁按钮的话，用户还能通过点击月份、切换视图等方式跳去超出范围的年份。

具体实现代码 #

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const currentYear = new Date().getFullYear();
  const maxAllowYear = currentYear + 1;

  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridYear', // 可替换为你需要的初始视图
    // 核心配置：限制可访问的日期范围
    validRange: {
      start: new Date(currentYear, 0, 1), // 当前年的1月1日
      end: new Date(maxAllowYear, 11, 31) // 允许的最后一年的12月31日
    },
    // 可选：自定义导航栏按钮，配合datesSet事件精准控制按钮状态
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,dayGridYear'
    },
    // 每次视图日期更新时，检查并设置导航按钮的禁用状态
    datesSet: function(info) {
      const currentViewYear = info.view.currentStart.getFullYear();
      const prevBtn = document.querySelector('.fc-prev-button');
      const nextBtn = document.querySelector('.fc-next-button');

      // 当前视图是当前年时，禁用向前按钮（不需要限制过去年份可删除此行）
      prevBtn.disabled = currentViewYear === currentYear;
      // 当前视图是允许的最后一年时，禁用向后按钮
      nextBtn.disabled = currentViewYear === maxAllowYear;
    }
  });

  calendar.render();
});

为什么之前的方法无效？ #

• 单独禁用fc-nextYear-button：只能禁用年份切换按钮，但用户仍可通过月份导航、直接点击日期等方式跳转到超出范围的年份，根本管不住。
• 用getFullYear/setFullYear：这只是操作原生日期对象的方法，没有和FullCalendar的视图控制逻辑绑定，自然无法限制日历的导航范围。

validRange是FullCalendar内置的范围控制机制，会自动阻止任何超出设定范围的视图跳转，同时会自动禁用无效的导航按钮（配合datesSet事件监听能让按钮状态更精准）。

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