Angular TypeScript 12中Full Calendar无法正常展示事件问题咨询

核心问题排查点 #

• 未注册必需的视图插件
  Angular封装的Full Calendar要求手动注册所有用到的插件，你使用了dayGridMonth视图，必须导入DayGridPlugin并加入plugins配置项，这是最常见的失效原因。
• 默认展示月份与事件日期不匹配
  你当前配置的事件全部为2020年8月的日期，而FullCalendar默认会加载当前系统日期对应的月份，自然看不到历史事件，需要添加initialDate配置指定初始展示日期，或者修改事件日期为当前月份测试。
• 模块未正确导入
  需确保当前组件所属的NgModule中，已经将FullCalendarModule加入到imports数组中。
• 事件属性写法不规范
  FullCalendar标准事件属性统一使用start表示开始时间，不推荐使用date属性，避免不同版本兼容问题。

修正后代码示例 #

模块导入代码（组件所属的module.ts） #

import { NgModule } from '@angular/core';
import { FullCalendarModule } from '@fullcalendar/angular';
import { DayGridPlugin } from '@fullcalendar/daygrid'; // 必须导入对应视图插件

// 注册插件到FullCalendar
FullCalendarModule.registerPlugins([
  DayGridPlugin
]);

@NgModule({
  imports: [
    // 其他已有导入项
    FullCalendarModule
  ]
})
export class YourComponentModule { }

组件TS代码修正 #

import { CalendarOptions } from '@fullcalendar/angular';

calendarOptions!: CalendarOptions;

ngOnInit(): void
{
  this.calendarOptions = {
    initialView: 'dayGridMonth',
    initialDate: '2020-08-01', // 指定初始展示2020年8月，匹配你的事件日期
    plugins: [DayGridPlugin], // 声明用到的插件
    events: [
      { title: 'event 1', start: '2020-08-01' , end:'2020-09-08'},
      { title: 'event 2', start: '2020-08-31' } // 替换date属性为标准start属性
    ]
  };
}

HTML代码无需修改，原有写法符合要求 #

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