Nicolas Nicolas -4 years ago 317
jQuery Question

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!

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download