将完整的日历插件与 angular 12 设计集成未加载

Question

我正在尝试在我的 Angular 项目中实现 FullCalendar 插件。

下面是代码 模块

    import { FullCalendarModule } from '@fullcalendar/angular'; // must go before plugins
    import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin!
    import interactionPlugin from '@fullcalendar/interaction'; // a plugin!
    
    FullCalendarModule.registerPlugins([ // register FullCalendar plugins
      dayGridPlugin,
      interactionPlugin
    ]);

@NgModule({
  imports: [
      CommonModule,
      FormsModule,
      FullCalendarModule
     
  ],

下面是component.ts中的代码

import { CalendarOptions } from '@fullcalendar/angular';
calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth'
  };

该项目也有 bootstrap 3.7

当我运行该项目时，未加载 FullCalendar 的设计。 我可以在 index.html 中看到样式加载，但它不起作用。

请指导。 附上图片以供参考

Answer 1

在 angular.json 样式数组中添加 fullcalendar stylesheet

angular.json

        "styles": [
          "src/styles.scss",
          "node_modules/@fullcalendar/core/main.css",
          "node_modules/@fullcalendar/daygrid/main.css"
        ],