如何隐藏FullCalendar的滚动条且不影响日程内容正常展示

问题场景 #

用户使用FullCalendar时遇到两个冲突问题：

• 设置height: "auto"后日历尺寸过小，无法完整展示所有日程
• 设置固定高度如height: 500后会出现滚动条打乱布局，单独隐藏.fc-scroller类元素不生效

解决步骤 #

步骤1：调整日历初始化配置 #

不要使用固定高度值，调整配置项适配内容高度，避免多余滚动条出现：

const calendar = new FullCalendar.Calendar(calendarEl, {
  // 保留你原有的其他配置
  height: "auto", // 高度跟随内容自适应
  fixedWeekCount: false, // 月视图不强制展示6周，仅展示当月实际需要的周数
  expandRows: true, // 自动拉伸行高填充可用空间，避免内容被挤压
});

步骤2：给外层容器加最小高度限制，避免尺寸过小 #

给包裹日历的父元素自定义一个类名（比如custom-calendar-wrapper），设置最小高度保证所有日程可完整展示：

.custom-calendar-wrapper {
  min-height: 650px; /* 可根据你的日程密度自行调整数值 */
  width: 100%;
}

步骤3：高优先级CSS强制隐藏滚动条 #

之前修改.fc-scroller不生效是因为FullCalendar内置样式优先级更高，需要增加选择器权重，同时兼容不同浏览器的滚动条隐藏规则：

/* 覆盖滚动条溢出规则，优先级拉满 */
.custom-calendar-wrapper .fc-scroller {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
  /* 火狐浏览器隐藏滚动条 */
  scrollbar-width: none;
  /* IE/Edge浏览器隐藏滚动条 */
  -ms-overflow-style: none;
}
/* Chrome/Safari等webkit内核浏览器隐藏滚动条 */
.custom-calendar-wrapper .fc-scroller::-webkit-scrollbar {
  display: none;
}

按上述配置修改后，既不会出现滚动条打乱布局，也不会因为高度自适应导致日历过小无法查看日程。

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