angularsassprimeng

Remove divider line in PrimeNG calendar component

I'm using the PrimeNG calendar component. How (if possible) can I remove or change the color of the line/divider between the date-picker-header and the date-picker itself?

enter image description here

Basic Stackblitz with PrimeNG calendars all including the divider: https://stackblitz.com/edit/primeng-calendar-demo?file=README.md

Calendar component in PrimeNG's github repo: https://github.com/primefaces/primeng/blob/master/src/app/components/calendar/calendar.ts

Solution

  • It's possible by overriding the component styles:

    :host ::ng-deep .p-datepicker-header {
  border-bottom: none;
  /* or border-bottom-color: red; */
}

    If you want to apply the style selectively, you can wrap this in an extra class:

    <p-calendar styleClass="no-divider"></p-calendar>

    :host ::ng-deep .p-datepicker.no-divider .p-datepicker-header {
  border-bottom: none;
}

    StackBlitz