How to modify style of date range PrimeNg's p-calendar?

Question

I am trying to understand how to modify the primeng p-calendar style for range selection, but can't understand. I want to show first and last item with the style p-highlight. And middle part of range must be another color. Something like this:

I'm tried something like this, but it's wrong:

.p-datepicker table td > span.p-highlight:first-child {
color: var(--datepicker-body-text-color);
background: var(--datepicker-body-selected-color);

}

Is it possible to do this with CSS?

Answer 1

I did it something like this:

<ng-template pTemplate="date" let-date>
      <span
        class="calendar-item"
        [ngClass]="{
          endpoint:
            date.day ===
              (dateRangePickerControl.value &&
              dateRangePickerControl.value[0]
                ? dateRangePickerControl.value[0].getDate()
                : null) ||
            date.day ===
              (dateRangePickerControl.value &&
              dateRangePickerControl.value[1]
                ? dateRangePickerControl.value[1].getDate()
                : null)
        }"
        >{{ date.day }}</span
      >
    </ng-template>

The "endpoint" class is the one by which you can control styling of start and end date. By setting back color for p-highlight you can control all selected cells.