FullCalendar问题：点击changeView无法重置日期范围

阿华AIGC实验室

2026-5-29

看起来你遇到的是FullCalendar视图重复切换时不更新日期范围的常见问题，我来帮你解决～

问题原因

你原来的代码首次点击正常，是因为第一次从其他视图切换到list视图时，FullCalendar会处理你传递的start和end参数；但当视图已经是list时，再次调用changeView到同一个视图，FullCalendar会跳过视图切换的逻辑，自然不会更新日期范围啦。

解决方案

试试下面这两种修改方案，都能解决这个问题：

方案一：显式更新日历选项+重新获取事件

这种方式先更新日历的全局起止日期，再切换视图（即使当前已是list视图也会触发重新渲染），最后重新拉取事件确保内容正确：

$('#checkRange').on('click', function () {
  const start = $('#firstDate').val();
  const end = $('#endDate').val();

  // 更新日历的起止日期配置
  $('#calendar').fullCalendar('option', {
    start: start,
    end: end
  });

  // 切换到list视图（强制触发视图渲染）
  $('#calendar').fullCalendar('changeView', 'list');

  // 重新获取事件，确保显示新日期范围内的内容
  $('#calendar').fullCalendar('refetchEvents');
});

方案二：跳转起始日期+切换视图

如果方案一效果不佳，可以先让日历跳转到起始日期，再切换视图并设置结束日期，最后强制渲染事件：

$('#checkRange').on('click', function () {
  const start = $('#firstDate').val();
  const end = $('#endDate').val();

  // 先跳转到起始日期
  $('#calendar').fullCalendar('gotoDate', start);

  // 切换到list视图并设置结束日期
  $('#calendar').fullCalendar('changeView', 'list', {
    end: end
  });

  // 强制重新渲染所有事件
  $('#calendar').fullCalendar('rerenderEvents');
});