Customize calendar touch UI and icon in p-calendar

[bombai]

Hi,

Someone can help me how can I change the modal calendar that shows with touch UI option and how can I change the background of the icon button?

I have tried to overwrite these classes, but never works.

My html code

Code: Select all

<p-calendar [locale]="locale" [showIcon]="true" [disabled]="isLoading" dateFormat="dd/mm/yy" [(ngModel)]="selectedDay"
          [ngModelOptions]="{standalone: true}" dateFormat="dd-mm-yy" [disabledDays]="[0]"  [showTime]="false" (onSelect)="onSearch()"
           readonlyInput="true" [touchUI]="true" icon="fa fa-calendar">
          </p-calendar>

Icon calendar



I see in the chrome tools the classes that apply to the button.

Code: Select all

.ui-widget-header .ui-button:enabled:active, .ui-widget-content .ui-button:enabled:active, .ui-widget.ui-button:enabled:active, .ui-button:enabled:active {
    border: 1px solid #156090;
    background: #186ba0;
    color: #ffffff;
}

I have tried to overwrite in the .scss of the angular component, but doesn't works with or without !important keyword.

Equals with the calendar modal. I want to change the active day, and the background of the header.



And again, I see the css that applies but I can't overwrite it.

Code: Select all

.ui-datepicker.ui-widget .ui-datepicker-calendar td a.ui-state-active {
    background-color: #186ba0;
    color: #ffffff;
}

I'm using primeng 6.1.0.

Someone can help me?