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等）。

千帆大模型平台

面向企业开发者的一站式大模型开发及服务运行平台

35

查看详情

完整实现示例

下面我们将把响应式视图切换的逻辑整合到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();
    }
  });
});

代码解释：

1. defaultView设置： 在FullCalendar初始化时，我们仍然根据当前的$(window).width()设置一个初始的defaultView。这确保了页面首次加载时日历能以合适的视图显示。
2. 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。

总结

通过巧妙地结合FullCalendar的windowResize事件钩子和changeView方法，我们可以轻松实现日历视图的响应式切换，极大地提升了用户在不同设备和屏幕尺寸下使用FullCalendar的体验。在实现过程中，考虑性能优化和选择合适的断点将有助于构建一个健壮且用户友好的日历组件。

以上就是FullCalendar响应式视图：根据屏幕尺寸动态调整日历显示的详细内容，更多请关注php中文网其它相关文章！