Angular集成ng-fullcalendar报错：No available FullCalendar view plugins求助

我来帮你搞定这个问题！你碰到的No available FullCalendar view plugins错误，本质是因为FullCalendar 5及以后版本采用了完全插件化的架构，而ng-fullcalendar只是Angular的封装组件，它不会自动帮你引入FullCalendar核心和必要的视图/交互插件。

解决步骤 #

1. 安装必要的FullCalendar依赖包

首先你需要安装FullCalendar的核心库以及常用的视图、交互插件，打开终端执行：

npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction

• @fullcalendar/core：FullCalendar核心功能包
• @fullcalendar/daygrid：月视图、日视图插件
• @fullcalendar/timegrid：周视图、日程视图插件
• @fullcalendar/interaction：支持事件拖拽、点击交互的插件

2. 在组件中导入插件并配置calendarOptions

修改你的app.component.ts，导入刚才安装的插件，并在calendarOptions中添加plugins配置项：

import { Component } from '@angular/core';
// 导入所需的FullCalendar插件
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayEvent: any;
  // 配置日历选项，必须包含plugins数组
  calendarOptions = {
    plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
    initialView: 'dayGridMonth', // 指定初始加载的视图（月视图）
    events: [], // 这里可以绑定你的EventService提供的事件数据
    // 其他你需要的配置项...
  };

  eventClick(event: any) {
    this.displayEvent = event;
  }

  updateEvent(event: any) {
    // 你的事件更新逻辑
  }

  clickButton(button: any) {
    // 你的按钮点击逻辑
  }
}

3. 验证配置

确保你的AppModule已经正确导入FullCalendarModule（你当前的代码已经做到了这一点，无需修改），然后重新启动Angular项目：

ng serve

为什么会出现这个错误？ #

FullCalendar从5.x版本开始，把所有非核心功能（比如各种视图、交互行为）都拆成了独立插件，不再默认包含。ng-fullcalendar作为Angular封装层，只负责把FullCalendar和Angular的生命周期绑定，不会自动帮你安装或导入这些插件，所以必须手动配置插件才能让日历正常渲染视图。

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