Why does Angular Calendar show plain texts and numbers only?

Question

The picture above is the only display when I added Angular Calendar. Does it have conflict with Font Awesome? Because I installed Font Awesome in my Angular project with Angular Material as its main styling and component framework.

HTML:

<mwl-calendar-month-view [viewDate]="viewDate" [events]="events">
</mwl-calendar-month-view>

TS:

import { Component } from '@angular/core';
import { CalendarEvent, CalendarUtils } from 'angular-calendar';

@Component({
    selector: 'app-creator-profile-calendar',
    templateUrl: './calendar.component.html',
    styleUrls: ['./calendar.component.scss'],
})
export class CalendarComponent {

    viewDate: Date = new Date();

    events: CalendarEvent[] = [];

}

Module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CalendarComponent } from './components/calendar/calendar.component';

import { CalendarModule, DateAdapter } from 'angular-calendar';
import * as moment from 'moment';
import { adapterFactory } from 'angular-calendar/date-adapters/moment';
export function momentAdapterFactory() {
    return adapterFactory(moment);
};

@NgModule({
    declarations: [
        CalendarComponent
    ],
    imports: [
        CommonModule,
        CalendarModule.forRoot({ provide: DateAdapter, useFactory: momentAdapterFactory })
    ], 
})
export class CreatorProfileModule { }

Answer 1

Oh okay. I forgot to add "./node_modules/angular-calendar/css/angular-calendar.css" in angular.json

That solved this problem when you manually install.

Answer 2

Add in your component encapsulation: ViewEncapsulation.None . it will work