Recently, I started using ngb-datepicker and I'm curious if it's possible to customize the background-color of a specific day, like the 8th of November.
HTML
<ngb-datepicker name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" [markDisabled]="isDisabled"
#d="ngbDatepicker"></ngb-datepicker>
<ng-template #customDay let-date let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled"
let-focused="focused">
<span class="custom-day" [class.weekend]="isMarkedDay(date)" [class.focused]="focused" [class.bg-primary]="selected"
[class.hidden]="date.month !== currentMonth" [class.text-muted]="disabled">
{{ date.day }}
</span>
</ng-template>
Typescript
export class HistoryComponent implements OnInit {
model: NgbDateStruct;
accomplishedDays: NgbDate[] = [];
day = new Date().getDate();
month = new Date().getMonth() + 1;
year = new Date().getFullYear();
today: NgbDate = new NgbDate(this.year, this.month, this.day); // July, 14 1789
constructor(
public mockdataService: MockDataService,
private calendar: NgbCalendar
) {}
ngOnInit() {}
isDisabled = (date: NgbDate, current: { month: number }) =>
date.month !== current.month;
isMarkedDay = () => this.calendar.getToday() == this.today; // .getWeekday(date) >= this.today;
}
I've been experimenting with this for some time now, but I'm struggling to get it to work. Currently, my goal is to highlight the current day, but it's not functioning as expected. I've even verified in the console that this.calendar.getToday() and this.today are identical, yet the comparison yields false.