Applying CSS classes to custom day template in ng-bootstraps datepicker

Issue

So I am using ng-bootstraps datepicker to display some user data for each day. I use custom day template to apply certain CSS classes

<ng-template #customDay let-date>
  <div
    class="custom-day"
    [ngClass]="evaluatePresenceType(date)"
  >
    {{ date.day }}
  </div>
</ng-template>

The thing is this method is being called many times for each day which is less than optimal. Is there a way to apply CSS class to every day just once, when the datepicker is being rendered and not every time I click anywhere?

Solution

When you want to use a custom template day to give some class to "specials days" you has two approach:

1. Use [ngClass] or [class.myClass]="function(date)" as you indicate
2. Use DayTemplateData (see the docs)

Well, the doc is not very clear. The idea is to have a function,e.g.

  data=(date: NgbDate, current?: {year: number, month: number})=>
  {
    //see that futhermore the "date" you has an object
    //current with two properties: "year" and "month" that is showing

    
    return this.calendar.getWeekday(date)>=6?'square':null
  }

Then you use

<input class="form-control" [dayTemplateData]="data"
             [dayTemplate]="customDay" ...>

And your template day pass the "data" using let-data=data

<ng-template #customDay let-date let-data="data" ...>
  <span class="custom-day" [ngClass]="data" ...>
    {{ date.day }}
  </span>
</ng-template>

See that if you only want to apply an unique class your function can return true or null and use [class.myClass]="data"

In the stackblitz, I use the two approach and use two counters to show the improve of this another approach

Answered By - Eliseo