Integrating full calendar plugin with angular 12 design not loading

Issue

I'm trying to implement the FullCalendar plugin in my angular project.

Below is the code Module

    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
     
  ],

Below is the code in component.ts

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

the project also has bootstrap 3.7

When I run the project the design for FullCalendar is not loading. I can see the style loading in the index.html but its not working.

Please Guide. Attaching an image for reference

Solution

Add fullcalendar stylesheet inside angular.json styles array

angular.json

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

Answered By - Chellappan வ