FullCalendar v5 如何实现内容宽度自适应屏幕无滚动条

方案1：CSS原生覆盖（最推荐，无需JS逻辑） #

直接覆盖FullCalendar默认样式，用百分比/弹性单位实现等宽列，完全不需要硬编码像素：

/* 给FullCalendar外层容器加自定义类名fc-custom-container，避免全局污染 */
.fc-custom-container .fc-daygrid {
  overflow-x: hidden; /* 禁用水平滚动 */
}
.fc-custom-container .fc-daygrid-day-frame {
  min-width: 0; /* 取消默认最小宽度限制，避免内容溢出撑宽列 */
}
.fc-custom-container table.fc-scrollgrid {
  table-layout: fixed; /* 强制表格列等宽分配 */
  width: 100% !important; /* 强制占满父容器宽度 */
}
.fc-custom-container .fc-daygrid-day {
  width: calc(100% / 7) !important; /* 一周7天均分宽度 */
}

/* 如果同时需要适配时间线月视图 */
.fc-custom-container .fc-timeline {
  overflow-x: hidden;
}
.fc-custom-container .fc-timeline-slots {
  /* 所有slot均分容器宽度，无需关心当月天数 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
}

对应的FullCalendar初始化配置里加上自定义类名即可：

var calendar = new FullCalendar.Calendar(calendarEl, {
  // 其他原有配置
  contentHeight: 'auto',
  views: {
    dayGridMonth: {
      // 给月视图加专属类名，不影响其他视图
      classNames: 'fc-custom-month-view'
    },
    timelineMonth: {
      slotDuration: { days: 1 },
      classNames: 'fc-custom-timeline-month-view'
    }
  }
})

方案2：生命周期钩子动态适配（适合有特殊自定义逻辑的场景） #

如果需要适配更复杂的自定义内容，可通过FullCalendar提供的视图挂载钩子动态计算宽度：

var calendar = new FullCalendar.Calendar(calendarEl, {
  // 其他原有配置
  contentHeight: 'auto',
  viewDidMount: function(view) {
    // 仅对月视图生效
    if (view.view.type === 'dayGridMonth' || view.view.type === 'timelineMonth') {
      const containerWidth = view.el.clientWidth;
      if (view.view.type === 'dayGridMonth') {
        // 天网格月视图均分7份
        const dayWidth = `${containerWidth / 7}px`;
        view.el.querySelectorAll('.fc-daygrid-day').forEach(dayEl => {
          dayEl.style.width = dayWidth;
        })
      } else {
        // 时间线月视图按当月天数均分
        const dayCount = view.view.currentEnd.getDayOfYear() - view.view.currentStart.getDayOfYear();
        const slotWidth = `${containerWidth / dayCount}px`;
        view.el.querySelectorAll('.fc-timeline-slot').forEach(slotEl => {
          slotEl.style.width = slotWidth;
        })
      }
    }
  },
  // 窗口大小变化时重新计算
  windowResize: function(view) {
    if (view.view.type === 'dayGridMonth' || view.view.type === 'timelineMonth') {
      // 复用上面的宽度计算逻辑即可
    }
  }
})

注意事项 #

• 不要给FullCalendar的外层父容器设置固定宽度，保持其width: 100%即可自动响应父级布局宽度
• 若日历内单日事件过多可配合dayMaxEvents: 3之类的配置限制单日显示事件数，避免高度撑开过多影响展示
• 所有样式覆盖建议加自定义前缀类名，避免影响页面内其他组件样式

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