Search code examples
javascriptjquerykendo-uicalendarkendo-ui-angular2

Angular 2 - Kendo UI Calendar not rendering correctly

I'm using the Kendo-UI calendar for angular 2

However I'm having a problem where my calendar doesn't render correctly. I don't receive any errors whatsoever, this is how my calendar looks:

enter image description here

It creates an extremely large div (20.000 pixels) and only shows the weekdays in the correct place. When I scroll all the way down, it does render the months and days etc, like this:

enter image description here

Here's the code I'm using to implement the calendar:

vendor.ts

import "@progress/kendo-angular-dateinputs";

shared.module.ts

import { CalendarModule } from "@progress/kendo-angular-dateinputs";
...
exports:[CalendarModule]

app.module.ts

import { SharedModule } from "./shared/shared.module";
...
imports: [SharedModule2]

mycomponent.component.html

<div *ngIf="showFromCalendar === true">
    <kendo-calendar></kendo-calendar>
</div>

It seems like I'm missing some file? I'm new to angular 2 and I'm not sure how to debug this since I don't receive any errors, so I hope you guys can help.

Thanks in advance!

Solution

  • It appears like the calendar CSS is not loaded. Make sure you are using the latest version of the @progress/kendo-theme-default package, and that the included styles are registered on a global level without style encapsulation.