Unable to add in bootsrap5 theming in Angular 16

Question

I'm trying to import bootsrap 5 theming into my fullcalendar v6.I have follow the fullcalendar guide https://fullcalendar.io/docs/bootstrap5 but it is not working for me and show me this when i run the website.

Here is my source code:

import { Component } from '@angular/core';
import { CalendarOptions, EventInput, EventContentArg } from '@fullcalendar/core'; 
import timeGridPlugin from '@fullcalendar/timegrid';
import dayGridPlugin from '@fullcalendar/daygrid';
import listPlugin from '@fullcalendar/list';
import bootstrap5Plugin from '@fullcalendar/bootstrap5';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css'; // needs additional webpack config!
@Component({
  selector: 'app-weekly-schedule',
  templateUrl: './weekly-schedule.component.html',
  styleUrls: ['./weekly-schedule.component.css']
})
export class WeeklyScheduleComponent {
  calendarOptions: CalendarOptions = {
    plugins: [ dayGridPlugin, timeGridPlugin, listPlugin,bootstrap5Plugin],
    themeSystem: 'bootstrap5',
    initialView: 'timeGridWeek',  
    weekends: false,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeGridWeek,timeGridDay',
    },
    slotMinTime: '08:00',
    slotMaxTime: '18:00',
    allDaySlot: false,
    slotEventOverlap: false,
    height: 850,
    aspectRatio:0.8,
    expandRows:true,
    handleWindowResize:true,
    events: this.mockEvents(),
    eventContent: this.customEventContent.bind(this), // Custom function to render event content
    slotLabelFormat: { hour: 'numeric', minute: '2-digit' }, // Display time for each slot
  };
  private mockEvents(): EventInput[] {
    return [
      {
        start: '2024-01-29T10:00:00',
        end: '2024-01-29T11:30:00',
        name: 'John Doe',
        employeeId: '12345',
      },
      {
        start: '2024-01-30T14:00:00',
        end: '2024-01-30T15:00:00',
        name: 'Jane Doe',
        employeeId: '67890',
      },
      {
        start: '2024-01-31T12:00:00',
        end: '2024-01-31T12:30:00',
        name: 'John Doe',
        employeeId: '12345',
      },
      {
        start: '2024-01-31T12:30:00',
        end: '2024-01-31T13:30:00',
        name: 'John Doe',
        employeeId: '12345',
      },
      {
        start: '2024-02-02T12:00:00',
        end: '2024-02-02T12:30:00',
        name: 'John Doe',
        employeeId: '12345',
      },
      // Add more mock events as needed
    ];
  }
  private customEventContent(arg: EventContentArg) {
    const eventInfo = arg.event.extendedProps;
    const details =
        '<div class="event-details" style="font-size: 14px; height: 100%; overflow: auto;">' +
        '<div>Name: ' + eventInfo['name'] + '</div>' +
        '<div>Employee ID: ' + eventInfo['employeeId'] + '</div>' +
        '<div>Time: ' + arg.timeText + '</div>' +
        '</div>';
    return { html: details };
}
}

I wanna import bootsrap 5 theming into my fullcalendar v6 and able to run the website.

Answer 1

You must not import the styles in your typescript code:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-icons/font/bootstrap-icons.css'; 

This files needs to be imported to you global application stylesheet file. Or can be added the style definition in your angular.json

"styles": [
   "src/styles.scss",
   "node_modules/......",
   ... other files here
],