Как поменять цвет иконки на а также цвет даты, выбранной в календаре

Question

Я использую календарь от primeng, это очень хороший компонент, но я чувствую, что ему не хватает примеров добавления пользовательских стилей в документацию.

Я использую версию с UI-значком.

<div class="form-group col-md-3">
            <p-calendar
              placeholder="Requeu Date"
              id="date"
              formControlName="date"
              dataType="string"
              dateFormat="MM dd, yy"
              [hideOnDateTimeSelect]="true"
              [defaultDate]="getDefaultDate()"
              [locale]="ptBR"
              [showButtonBar]="true"
              [showTime]="true"
              [disabledDays]="[0,6]"
              [showIcon]="true">              
            </p-calendar>
</div>

по умолчанию значок синего цвета, а при выборе даты по умолчанию он также синего цвета. Я хотел бы изменить его на другой цвет, например, красный, а также заметил, что он не работает должным образом с bootstrap контейнерами и формами, какие-либо советы по этому аспекту?

заранее спасибо.

Answer 1

Если вы хотите изменить выбранный день, вы можете попробовать добавить в вас css это:

a.ui-state-active {
background-color: red !important;
}

Вместо этого, если вы хотите изменить фон значка, вы можете попробовать добавить это:

.ui-button {
 background-color: red !important;
}