将完整日历插件与 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'
  };

该项目还有bootstrap3.7

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

请指导。附加图像以供参考

Answer 1

在 angular.json 样式数组中添加完整日历 stylesheet

angular.json

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

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

Integrating full calendar plugin with angular 12 design not loading

fullcalendar

twitter-bootstrap-3

angular