fullCalendar问题：如何根据屏幕尺寸动态切换日历视图

问题原因 #

你当前的代码仅在页面初始化时根据窗口宽度设置了一次defaultView，没有监听窗口大小变化的事件，因此拖拽开发者工具调整窗口尺寸时，视图不会自动切换。

改进方案 #

1. 监听window.resize事件，配合防抖函数避免频繁触发视图切换
2. 在事件回调中判断窗口宽度，调用fullCalendar的changeView方法切换视图
3. 优化原代码中的冗余逻辑（比如checkbox存在性判断、事件显示隐藏逻辑）

修改后的完整代码 #

$(document).ready(function () {
  // 初始化日历并保存实例引用
  const $calendar = $('#calendar').fullCalendar({
    defaultView: $(window).width() < 765 ? 'basicDay':'agendaWeek',
    header: {
      left: "prev,next today",
      center: "title",
      right: "listMonth, month,agendaWeek,agendaDay",
    },
    displayEventTime: false,
    editable: false,
    eventRender: function(calEvent, element) {
      // 简化checkbox存在性判断
      const checkboxPresent = $('.checkboxContainer').length > 0;
      
      if (calEvent.title === "Title 1") {
        element.css('background-color', '#44804C').addClass("normal");
        if (checkboxPresent && !$("#normal").is(":checked")) {
          element.hide();
        }
      } else if (calEvent.title === "Title 2") {
        element.css('background-color', '#804478').addClass("event");
        if (checkboxPresent && !$("#event").is(":checked")) {
          element.hide();
        }
      }
    },
    events: 'load.php',
  });

  // 创建复选框容器
  const checkboxContainer = $("<div class='mb-3 checkboxContainer'><div class='d-flex flex-row'><label>Normal</label><input type='checkbox' id='normal' class='mx-3' checked></div><div class='d-flex flex-row'><label>Event</label><input type='checkbox' id='event' class='mx-3' checked></div></div>");
  $(".fc-toolbar").before(checkboxContainer);
  
  // 复选框点击事件简化
  $("#normal, #event").on("click", function(){
    const className = $(this).attr("id");
    $(this).is(":checked") 
      ? $calendar.find("." + className).show() 
      : $calendar.find("." + className).hide();
  });

  // 防抖函数：避免窗口拖动时频繁触发视图切换
  let resizeTimeout;
  $(window).on('resize', function() {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function() {
      const currentView = $calendar.fullCalendar('getView').name;
      const targetView = $(window).width() < 765 ? 'basicDay' : 'agendaWeek';
      // 仅当视图不一致时切换，减少无效操作
      if (currentView !== targetView) {
        $calendar.fullCalendar('changeView', targetView);
      }
    }, 200); // 200ms延迟可按需调整
  });
});

关键改进点说明 #

• 防抖处理：设置200ms延迟，窗口停止拖动后才执行视图切换，避免频繁触发导致性能损耗
• 视图切换判断：先获取当前视图名称，仅和目标视图不一致时才调用切换方法，减少不必要的DOM操作
• 代码简化：精简了checkbox存在性判断逻辑，用三元表达式简化复选框的显示隐藏逻辑

内容的提问来源于stack exchange，提问作者papalatong.dev