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

gretarsson · Answer 1 · 2022-12-09T17:39:50.850

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;
}

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

1 Answers1