Angular15升级后FullCalendar 6.1.8时间槽不显示问题求助

1. 确认TimeGrid插件注册正确性 #

FullCalendar 6.x采用插件注册机制，需确保在Angular模块中正确导入并注册timeGridPlugin：

import { FullCalendarModule } from '@fullcalendar/angular';
import timeGridPlugin from '@fullcalendar/timegrid';

FullCalendarModule.registerPlugins([
  timeGridPlugin
]);

若遗漏注册，TimeGrid的核心功能（包括时间槽）将无法生效。

2. 检查时间槽相关配置参数 #

核对FullCalendar初始化配置中的关键时间槽参数，确保设置合理：

• slotMinTime/slotMaxTime：指定时间槽的显示范围，例：slotMinTime: '08:00:00'、slotMaxTime: '18:00:00'
• slotDuration：设置时间槽的间隔，例：slotDuration: '00:30:00'
• initialView：确认当前视图为timeGridDay或timeGridWeek（非TimeGrid视图不会显示时间槽）

示例配置片段：

calendarOptions = {
  plugins: [timeGridPlugin],
  initialView: 'timeGridWeek',
  slotMinTime: '08:00:00',
  slotMaxTime: '18:00:00',
  slotDuration: '00:30:00'
};

3. 验证样式文件加载完整性 #

FullCalendar 6.x的样式依赖需单独引入，确保全局样式中包含TimeGrid的样式文件：

• 若使用CSS：在angular.json的styles数组中添加node_modules/@fullcalendar/timegrid/main.css
• 若使用SCSS：在全局样式文件中导入@import '@fullcalendar/timegrid/main.scss';
  样式缺失会导致时间槽的边框、背景等视觉元素无法渲染，看起来像“消失”。

4. 排查Angular视图封装冲突 #

Angular默认的视图封装可能隔离FullCalendar样式，可尝试在日历组件中禁用视图封装：

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class CalendarComponent { /* 组件逻辑 */ }

5. 查看控制台错误信息 #

打开浏览器开发者工具的Console面板，检查是否存在@fullcalendar/timegrid相关的报错（如模块加载失败、样式解析错误等），这类错误可能直接导致时间槽无法渲染。

6. 对比升级前后配置差异 #

将升级前的FullCalendar配置与当前配置逐一比对，确认时间视图相关参数未被误修改。

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