Primeng: Overriding nested styles in Schedule

[tlegutko]

Hi, I'm using Schedule and I'd like to modify nested css class of a component in order to change the background of current day. I found out that I need to modify css class fc-today (http://stackoverflow.com/questions/4769707/how-to-set-the-current-day-color-in-fullcalendar), but when I define such a class in my .css file for my component, it's not used.

I'm using v. beta-12 (we're on Angular 2 RC4).

My component:

@Component(
  {
    selector: 'calendar',
    styleUrls: ['./calendar.styles.scss'],
    template: `
    <p-schedule [events]="events" [header]="header" [nowIndicator]="true"
    [locale]="pl" [defaultView]="'agendaDay'"></p-schedule>
`,
    directives: [
      Schedule
    ]
  }
)

And in calendar.styles.scss:

.fc-today {
  background: lightgrey !important;
}

And then the calendar ignores my css.

I also tried adding inline attribute to <p-calendar> such as style="{'fc-today{background: red !important}'}", as suggested in https://github.com/primefaces/primeng/issues/558, but then it just stops rendering. Any help apprieciated.

[tlegutko]

SOLVED. if anyone stumbles upon this problem, the solution lies in Angular2's view encapsulation.
All I needed was encapsulation: ViewEncapsulation.None, in my component's declaration and then the css from my calendar.styles.scss was applied correctly. For more info on view encapsulation see https://angular.io/docs/ts/latest/guide/component-styles.html#!#view-encapsulation.