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

【问题标题】：将完整的日历插件与 angular 12 设计集成未加载(Integrating full calendar plugin with angular 12 design not loading)
【发布时间】：2022-01-24 08:27:00
【问题描述】：

我正在尝试在我的 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 中看到样式加载，但它不起作用。

请指导。附上图片以供参考 Integrating full calendar plugin with angular 12 design not loading

控制台是否出现错误？
控制台没有错误
@ShrutiNair 你能分享你项目的更多细节吗？

【解决方案1】：

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

angular.json

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

谢谢。我使用了 common/main.css 和 daygrid/main.css
欢迎@ShrutiNair！！！

分享于2022年07月17日 angular fullcalendar twitter-bootstrap-3 问答