Как правильно отформатировать FullCalendar в Angular, который имеет Bootstrap?

Question

У меня Bootstrap-4, примененный к моему проекту Angular. Как правильно активировать themeSystem с Fullcalender?

Я полагаю, это потому, что я неправильно использую bootstrapPlugin с themeSystem. Пожалуйста, дайте мне знать с моим кодом ниже, что я делаю неправильно.

import bootstrapPlugin from '@fullcalendar/bootstrap';

export class CalendarComponent implements OnInit {

    constructor(public datesService: DatesService) { }

    @ViewChild('calendar', { static: false }) calendarComponent: FullCalendarComponent; // the #calendar in the template

    calendarVisible = true;
    calendarPlugins = [dayGridPlugin, timeGrigPlugin, interactionPlugin, bootstrapPlugin];
    calendarWeekends = true;
    calendarEvents: EventInput[] = [];
    themeSystem: 'bootstrap';

    public dates: any;


    ngOnInit() {
        this.datesService.getDates()
            .then(res => {
                this.dates = res;
                this.dates.forEach(d =>
                    this.calendarEvents = this.calendarEvents.concat({ 'title': d.projectName, 'start': new Date(d.liveDate) }))
            })
    }

}

Форматирование в календаре не похоже на несколько примеров в Интернете. Пожалуйста, дайте мне знать. Спасибо.