FullCalendar无法根据窗口尺寸切换视图问题排查

问题根源 #

• API版本不兼容：你用FullCalendar v5+的原生JS方式初始化日历，但切换视图时用了v3及以前的jQuery插件语法$('#calendar').fullCalendar()，v5+已废弃该写法，必须通过创建的calendar实例调用方法。
• 缺少初始视图配置：页面首次加载时未根据窗口宽度设置对应视图，默认显示月视图，移动端打开时不会自动切换。
• resize事件未初始触发：只有窗口尺寸变化时才执行视图切换逻辑，页面加载时不会主动触发，导致初始状态不符合预期。

修复后的代码 #

document.addEventListener('DOMContentLoaded', function() {
   var calendarEl = document.getElementById('calendar');
   // 初始化时根据窗口宽度确定视图
   var initialView = window.innerWidth < 800 ? 'dayGridDay' : 'dayGridMonth';
   
   var calendar = new FullCalendar.Calendar(calendarEl, {
      events: 'fetchSchedule.php',
      selectable: false,
      initialView: initialView // 设置初始视图
   });

   // 封装视图切换逻辑，复用性更强
   function switchCalendarView() {
      var targetView = window.innerWidth < 800 ? 'dayGridDay' : 'dayGridMonth';
      calendar.changeView(targetView); // v5+ 正确的视图切换方法
   }

   // 页面加载时执行一次，确保初始视图正确
   switchCalendarView();
   // 监听窗口 resize 事件
   window.addEventListener('resize', switchCalendarView);

   calendar.render();
});

关键修改说明 #

1. 新增初始视图判断，页面加载时就根据窗口宽度设置initialView，打开页面直接显示对应视图。
2. 将视图切换逻辑封装为函数，既避免重复代码，又能在页面加载时主动执行，解决初始状态问题。
3. 替换旧的jQuery视图切换语法，改用v5+官方推荐的calendar.changeView()方法，和初始化API保持版本一致。
4. 用原生JS监听resize事件（若项目依赖jQuery，也可改为$(window).resize(switchCalendarView)，核心是调用calendar实例的方法）。

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