IgniteUI calendar does not load any style in Angular

I've been getting a weird problem while trying to use IgniteUI on Angular. Whatever I try the component just wont render right for some reason. This is the component class:

import { Component, ViewChild, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import {ApiService} from "../api.service";
import { IgxCalendarComponent, DateRangeType } from 'igniteui-angular';

@Component({
selector: 'app-calendarform',
templateUrl: './calendarform.component.html',
styleUrls: ['./calendarform.component.css']
})
export class CalendarformComponent implements OnInit {
@ViewChild('calendar', { static: true }) public calendar: IgxCalendarComponent;
public today = new Date(Date.now());

ngOnInit() {
this.calendar.disabledDates = [{
type: DateRangeType.Between,
dateRange: [
new Date(1, 1, 1),
new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDay())
]
}];
}

constructor(private router: Router, private service: ApiService) {

}

public onSelection(dates: Date | Date[]) {
console.log(JSON.stringify(dates));
}

}


This is the html:

<div class="calendar-section">
<article class="calendar-wrapper">
<igx-calendar #calendar selection="single" (selected)="onSelection($event)" [showWeekNumbers]="true"></igx-calendar>
</article>
</div>


And this the css:

.calendar-wrapper {
max-width: 400px;
min-width: 200px;
margin: 8px;
}

.igx-calendar {
box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), 0 1px 1px 0 rgba(0,0,0,.12), 0 2px 1px -1px rgba(0,0,0,.08);
}


I've tryed everything I could think of, I added the igniteui-angulr.css import in angular.js but nothing changed. The calendar stye just wont get rendered for some reason. Also another weird thing is that whatever date I click, the one before it gets selected. This is a comparison of what it looks like and what it should look like



Continue reading...