How can I customize the style of FullCalendar?

I'm currently working on a project where I'm using FullCalendar for displaying events. While FullCalendar is a great library, I'm looking to make some specific style customizations to better match the look and feel of my application.

Here are a few things I'm trying to achieve:

Change the background color of the calendar header and cells. Customize the appearance of the event tooltips and popovers.

Could anyone provide guidance or examples on how to effectively customize the FullCalendar style? Are there specific classes or methods I should use, or best practices for integrating custom styles?

Any help would be greatly appreciated!

Thank you!

I have tried overriding the default CSS styles, but I’m not sure if I’m targeting the correct elements or if there’s a more efficient way to apply these styles.

my html & css :

  <full-calendar
        class="w-full rounded-lg overflow-hidden"
        [options]="calendarOptions"
      ></full-calendar>

  .fc .fc-button-primary {
    background-color: aliceblue;
  }

 "styles": [
              "src/app/components/calendar/calendar.component.css",
            ],

I finally found how it works, you add the style you want in angular.json , and we can override the css after that