调整FullCalendar高度适配窗口以消除双滚动条问题

核心逻辑是限制日历容器高度为窗口可用高度，让滚动行为仅发生在日历内部，彻底去掉外层页面滚动条。

方案1：通过内置配置动态计算高度 #

直接调用FullCalendar官方提供的height配置项，配合窗口高度计算实现：

// 日历初始化逻辑
document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  // 计算可用高度：窗口总高度减去页面顶部固定元素（导航栏、标题区等）的总高度，可根据实际情况调整数值
  const getAvailableHeight = () => window.innerHeight - 80;

  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的其他日历配置
    height: getAvailableHeight()
  });

  calendar.render();

  // 监听窗口大小变化，实时更新日历高度
  window.addEventListener('resize', () => {
    calendar.setOption('height', getAvailableHeight());
  });
});

方案2：通过CSS限制容器高度 #

如果不想写JS监听，也可以直接通过CSS固定父容器高度，配合配置实现：

1. 给日历外层容器添加样式

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.calendar-wrapper {
  /* 减去顶部固定元素高度，根据实际业务调整数值 */
  height: calc(100vh - 80px);
  overflow: hidden;
}

2. 日历初始化时指定高度占满容器

const calendar = new FullCalendar.Calendar(calendarEl, {
  // 你的其他日历配置
  height: '100%'
});

补充说明 #

• 如果需要保留日历头部（月份切换、视图切换区）固定不滚动，可以将height配置替换为contentHeight，仅限制日历内容区域高度
• 数值调整时如果出现底部内容截断，适当减小高度计算的差值即可

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