I recently developed a calendar using FullCalendar v5 in Angular 8, and I was pleased with how it looked without any additional styling. However, I now want to integrate forms for creating events when a date is clicked, so I decided to incorporate Bootstrap v5 into the mix. I updated my angular.json file to include the necessary imports for Bootstrap v5, following the steps shown in this image. I successfully added event creation functionality to the calendar using Bootstrap form elements, but unfortunately, the Bootstrap styles started affecting the calendar layout, which was not my intention as visible here: enter image description here. The calendar's day names and dates now have a blue color with underlines, which is not desired. Instead, I would prefer them to look like this: like this. I attempted to override the Bootstrap styles by adding custom CSS rules targeting specific calendar classes:
a .fc-col-header-cell-cushion {
color: black;
text-decoration: none;
background-color: transparent;
}
However, these styles did not take effect on the calendar components. How can I prevent or remove the unwanted Bootstrap styling from affecting my calendar?