Angular 15中FullCalendar v6.1.8日历内容横向滚动实现方案

1. 修复No ScrollGrid implementation错误 #

你遇到的报错是因为dayMinWidth配置依赖ScrollGrid插件，当前项目未引入该插件，解决步骤如下：

安装插件 #

执行npm命令安装对应版本的ScrollGrid插件（版本需与其他FullCalendar插件保持一致，即^6.1.8）：

npm install @fullcalendar/scrollgrid@^6.1.8

导入并配置插件 #

在组件的TypeScript代码中导入插件，并添加到calendarOptions的plugins数组里：

import { scrollGridPlugin } from '@fullcalendar/scrollgrid';

// ...

this.calendarOptions = {
  plugins: [
    interactionPlugin,
    dayGridPlugin,
    timeGridPlugin,
    listPlugin,
    scrollGridPlugin // 新增ScrollGrid插件
  ],
  headerToolbar: {
    left: 'prev,next',
    right: ''
  },
  dayMinWidth: 200, // 现在可正常生效
  // 其他配置项...
};

2. 实现头部固定+内容横向滚动（屏幕>500px时生效） #

要让黄框区域（头部工具栏）固定，红框区域（日历内容）可横向滚动，需结合CSS媒体查询和容器布局调整：

调整组件HTML结构 #

给full-calendar套一层容器，方便控制滚动：

<div class="calendar-container">
  <full-calendar *ngIf="calendarVisible" [options]="calendarOptions" #fullCalendar>
    <ng-template #eventContent let-arg>
      <span>{{ arg.event.title }}</span>
    </ng-template>
  </full-calendar>
</div>

添加CSS样式 #

通过媒体查询设置屏幕宽度大于500px时的布局：

/* 默认移动端布局，保持原有适配 */
.calendar-container {
  width: 100%;
  overflow: hidden;
}

/* 屏幕宽度≥501px时启用横向滚动+固定头部 */
@media (min-width: 501px) {
  .calendar-container {
    overflow-x: auto;
    /* 可选：优化滚动条样式 */
    scrollbar-width: thin;
  }

  /* 固定头部工具栏，不随内容滚动 */
  .fc-header-toolbar {
    position: sticky;
    top: 0;
    background-color: #fff; /* 与页面背景色一致，避免透明穿透 */
    z-index: 10;
    width: fit-content; /* 适配内容宽度，避免不必要拉伸 */
    padding: 0.5rem 0; /* 可选：调整内边距优化视觉 */
  }

  /* 让日历内容区域撑满所需宽度，触发横向滚动 */
  .fc-scrollgrid {
    width: fit-content;
  }
}

注意事项 #

• 确保所有FullCalendar相关插件版本统一，避免版本差异导致兼容性问题。
• 若页面存在其他固定顶部元素（如导航栏），需调整.fc-header-toolbar的top值，避免重叠。
• fit-content属性在现代浏览器中均支持，若需兼容旧版浏览器，可替换为具体最小宽度值（如min-width: 1200px）。

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