如何在移动设备/小屏幕触发FullCalendar的指定jQuery样式代码？

嘿，这个需求挺常见的，咱们可以通过窗口尺寸判断 + FullCalendar的钩子函数结合来实现，同时还要考虑窗口大小变化时的动态适配，避免用户拖动窗口后样式失效。下面是具体的实现步骤和代码：

1. 定义小屏幕检测工具函数 #

先写一个可复用的函数，用来判断当前窗口是否属于你定义的“小屏幕/移动设备”范围（这里用768px作为断点，你可以根据自己的需求修改阈值）：

function checkIsSmallScreen() {
  // 自定义你的屏幕宽度阈值，比如768px是常见的移动端断点
  return window.innerWidth < 768;
}

2. 在FullCalendar初始化中加入条件样式逻辑 #

在eventAfterRender钩子中加入判断，只有符合小屏幕条件时才调整事件的高度：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 这里放你的其他日历配置项，比如header、events数据源等
    eventAfterRender: function(event, element, view) {
      // 仅在小屏幕时应用自定义高度
      if (checkIsSmallScreen()) {
        $(element).css('height','10px');
      } else {
        // 大屏幕下重置样式，避免小屏幕的样式残留
        $(element).css('height', '');
      }
    }
  });

  calendar.render();

  // 监听窗口resize事件，适配屏幕尺寸变化
  window.addEventListener('resize', function() {
    // 防抖处理：避免resize频繁触发导致性能问题
    clearTimeout(window.resizeTimer);
    window.resizeTimer = setTimeout(function() {
      // 重新渲染日历，让eventAfterRender再次执行更新样式
      calendar.render();
    }, 250);
  });
});

可选：更高效的样式更新方案（无需重新渲染日历） #

如果你的日历数据量较大，重新渲染整个日历可能会有性能损耗，你可以直接遍历所有事件元素更新样式，而不用重新渲染：

// 替换上面的resize监听部分
window.addEventListener('resize', function() {
  clearTimeout(window.resizeTimer);
  window.resizeTimer = setTimeout(function() {
    // 获取所有日历事件元素
    const eventElements = document.querySelectorAll('.fc-event');
    eventElements.forEach(el => {
      if (checkIsSmallScreen()) {
        $(el).css('height','10px');
      } else {
        $(el).css('height', '');
      }
    });
  }, 250);
});

关键注意点 #

• 为什么要处理resize事件？用户可能拖动浏览器窗口切换屏幕尺寸，这时候需要动态更新样式，避免样式错乱。
• 防抖处理是为了减少resize事件的触发频率，避免频繁操作影响页面性能，延迟时间可以根据需求调整。
• 一定要在大屏幕时重置样式，否则小屏幕设置的高度会在大屏幕上残留，破坏原本的布局。

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