Kendo-angular: Kendo UI for Angular: styling the datepicker

[shanegela]

I'm submitting a support request to https://www.telerik.com/account/support-tickets.

• Bug report

Current behavior

I'm trying to change the font color on the datepicker by using the kendo classes, but it's not working.

Expected behavior

I'd like to be able to set the style on the datepicker by overriding the kendo classes.

Minimal reproduction of the problem with instructions

1. Example resource: http://stackoverflow.com/questions/38860754/change-font-color-in-kendo-datepicker
2. Plunker: http://plnkr.co/edit/aGXz8LcrjIresv6uAXc4?p=preview
3. created a app.component.css file that should change the datepick font color to red

What is the motivation or use case for changing the behavior?

Need to customize the style of the datepicker to match corporate application.

Environment

Package versions:

Browser:

• Chrome (desktop) Version 60.0.3112.113 (Official Build) (64-bit)

System:

• TypeScript version: 1.0.3.0
• Node version: v6.10.2
• Platform: Windows

[ggkrustev]

Hi @shanegela,

the DatePicker doesn't catch the font-color, because the Angular component encapsulates the CSS classes by default. This is controlled by the ViewEncapsulation enum. On the other hand, the styles are written in no encapsulation style, hence the rules don't apply to the Kendo components.

The easiest solution is to stop the encapsulation of the component using the . Check the updated Plunker demo:
http://plnkr.co/edit/zCDssUUVLx9qvB5ZGClo?p=preview

Perusing the Angular documentation will help to understand how to style Angular components easier:
https://angular.io/guide/component-styles

If you have further questions, please either open a Support ticket or post your question in Stackoverflow.