How do I add custom styling to days outside of current month?

Question

I have an issue with not being able to make the days outside of 'current' month look disabled with ngbdatepicker. The newer version seems to have support for this, but I have not been able to reproduce it.

I want to style 'outsideDays' to look grey, while 'current' month is black without disabling them.

See picture for reference: calendar example

Our app is using the following: Angular v.12.0.0 ng-bootstrap v.10.0.0

Answer 1

I came across this thread when I was researching a solution for this problem in connection with a custom day template (AFAIK NgbDatepicker greys out days outside the currently selected month automatically when not using a custom day template). The opening post unfortunately is not clear about that, so I don't know if this is helpful, but I will share my solution anyway. It is actually quite simple:

• You need a public instance property to which you assign the number of the currently selected month.
• This assignment has to be made initially and in the handler of the navigate event (NgbDatepickerNavigateEvent).
• In the day template define a class binding to which you assign a comparison operation that tests whether the respective day is not in the currently selected month.

<!-- my-datepicker.component.html -->

<ngb-datepicker
    [dayTemplate]="dayTemplate"
    [startDate]="startDate"
    (navigate)="onNgbDatepickerDropdownChange($event)"
>
</ngb-datepicker>

<ng-template #dayTemplate let-date >
    <span
      class="day-template"
      [class.outside-day]="date.month !== activeMonth"
    >
      {{ date.day }}
    </span>
</ng-template>

// my-datepicker.component.ts

@Component( {
    selector: 'app-my-datepicker',
    templateUrl: './my-datepicker.component.html',
    styleUrls: [ './my-datepicker.component.css' ]
} )
export class MyDatepickerComponent {

  // ...

  // using arbitrary hard-coded date as start date
  startDate: NgbDateStruct = { year: 2022, month: 3, day: 4 };

  activeMonth = this.startDate.month;

  constructor() {};

  // ...

  onNgbDatepickerDropdownChange( navigateEvent: NgbDatepickerNavigateEvent ): void {
    this.activeMonth = navigateEvent.next.month;
  }

  // ...
}   

/* my-datepicker.component.css */

.day-template {
  color: black;
}

.day-template.outside-day {
  color: grey;
}