FullCalendar响应式视图：根据屏幕尺寸动态调整日历显示

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

FullCalendar响应式视图：根据屏幕尺寸动态调整日历显示

2025-11-20

浏览次数：次

返回列表

FullCalendar响应式视图：根据屏幕尺寸动态调整日历显示

本教程详细介绍了如何在fullcalendar中实现响应式视图切换。通过利用windowresize事件钩子和changeview方法，我们能够根据浏览器窗口的实时宽度动态调整日历的默认视图，例如在小屏幕上显示“basicday”视图，在大屏幕上显示“agendaweek”视图，从而提升用户体验，确保日历在不同设备上都能以最佳方式呈现。

FullCalendar响应式视图切换的挑战

在开发Web应用时，确保内容在不同屏幕尺寸下都能良好显示是至关重要的。对于FullCalendar这类复杂的组件，仅仅在初始化时设置defaultView并不能满足响应式设计的需求。例如，当用户在桌面设备上加载页面时，可能显示agendaWeek视图，但当他们将浏览器窗口缩小到移动设备尺寸时，日历视图并不会自动切换到更适合小屏幕的basicDay或agendaDay。这种行为导致用户体验不佳，因为视图无法适应屏幕尺寸的变化。

原始代码尝试通过在$(document).ready()中根据$(window).width()设置defaultView来解决这个问题，但这仅在页面初次加载时有效。当用户在不刷新页面的情况下调整窗口大小时，defaultView的设置不会再次执行，因此日历视图保持不变。

解决方案：利用windowResize事件和changeView方法

FullCalendar提供了一个名为windowResize的事件钩子，它会在日历所在的浏览器窗口尺寸发生变化时触发。结合FullCalendar实例的changeView方法，我们就可以实现根据屏幕尺寸动态调整日历视图的功能。

1. windowResize事件钩子

windowResize事件在FullCalendar所在的窗口或父元素尺寸变化时触发。这个事件回调函数会接收一个view对象作为参数，该对象包含了当前日历视图的详细信息，包括视图名称（view.name）。

2. changeView方法

changeView是FullCalendar实例的一个核心方法，用于在运行时切换日历的视图。它接受一个字符串参数，代表要切换到的视图名称（例如basicDay, agendaWeek, month等）。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

完整实现示例

下面我们将把响应式视图切换的逻辑整合到FullCalendar的初始化代码中。我们将继续使用jQuery插件风格的FullCalendar（通常是v3或v4版本），因为原始问题代码采用的是这种风格。

$(document).ready(function () {
  // 初始化FullCalendar
  $('#calendar').fullCalendar({
    // 根据初始窗口宽度设置默认视图
    defaultView: $(window).width() < 765 ? 'basicDay' : 'agendaWeek',

    // 配置日历头部
    header: {
      left: "prev,next today",
      center: "title",
      right: "listMonth, month,agendaWeek,agendaDay",
    },
    displayEventTime: false, // 不显示事件时间
    editable: false,         // 不可编辑事件

    // 监听窗口尺寸变化事件
    windowResize: function(view) {
      const currentWidth = $(window).width();
      const targetView = currentWidth < 765 ? 'basicDay' : 'agendaWeek';

      // 只有当目标视图与当前视图不同时才进行切换，避免不必要的重新渲染
      if (view.name !== targetView) {
        $('#calendar').fullCalendar('changeView', targetView);
      }
    },

    // 事件渲染回调函数 (来自原始问题)
    eventRender: function(calEvent, element, view) {
      var checkboxPresent = false;
      if( $('.calendar').find(".checkboxContainer").length == 1 ){
        checkboxPresent = true;
      }

      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',
  });

  // 创建并添加自定义复选框 (来自原始问题)
  var 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 for='event'>Event</label><input type='checkbox' id='event' class='mx-3' checked></div></div>");
  $(".fc-toolbar").before(checkboxContainer);

  // 复选框点击事件处理 (来自原始问题)
  $("#calendar").on("click", "input[type='checkbox']", function(){
    if($(this).is(":checked")){
      $('#calendar').find("."+$(this).attr("id")).show();
    }else{
      $('#calendar').find("."+$(this).attr("id")).hide();
    }
  });
});

代码解释：

defaultView设置： 在FullCalendar初始化时，我们仍然根据当前的$(window).width()设置一个初始的defaultView。这确保了页面首次加载时日历能以合适的视图显示。
windowResize回调：
- 当浏览器窗口大小改变时，此函数会被调用。
- currentWidth获取当前的窗口宽度。
- targetView根据预设的断点（765px）决定目标视图是basicDay还是agendaWeek。
- if (view.name !== targetView)：这是一个重要的优化。它检查当前日历的视图名称（view.name）是否与计算出的targetView不同。只有当视图确实需要改变时才调用changeView，这可以避免在窗口大小在同一断点范围内频繁调整时，日历不必要的重新渲染，从而提升性能。
- $('#calendar').fullCalendar('changeView', targetView)：这是jQuery插件风格FullCalendar调用changeView方法的标准方式。

注意事项

性能优化（防抖/节流）： windowResize事件在窗口调整大小时可能会非常频繁地触发。如果日历的重新渲染操作比较耗时，频繁触发可能会导致性能问题。在生产环境中，可以考虑对windowResize回调函数进行“防抖（debounce）”或“节流（throttle）”处理，以限制其执行频率。例如，可以使用Lodash库的_.debounce方法。
断点选择： 示例中使用765px作为断点，这只是一个示例值。在实际项目中，应根据设计稿和目标设备的常见尺寸来选择合适的断点。
视图名称： 确保changeView中使用的视图名称是FullCalendar支持的有效视图名称（例如dayGridMonth, timeGridWeek, listWeek等）。
FullCalendar版本： 上述代码适用于FullCalendar v3/v4的jQuery插件风格。如果使用的是FullCalendar v5及更高版本，其API有所不同，需要通过FullCalendar.Calendar构造函数创建实例，并通过实例方法调用changeView。