Manipulate CSS from TypeScript in Angular - css

Question

I'm working with Angular and have a calendar which is filled dynamically. Also I have a range of dates and I want to change the background for several days within this range. I'm using moment for handeling dates and moment-range for the date-range.
In TypeScript I have managed to check if a specific day is in the range.
const a = new Date(2023,0,8);
const start = new Date(2023, 0, 9);
const end = new Date(2023, 4, 23);
const range = moment.range(start, end);
console.log(range.contains(a));
But in the html I have only one 'day' which changes constantly. I have a css-class class="background" which changes my background when I write it in html but I can't access the specific days.
How can I only highlight the days which are in the range?
ts file
export class CalendarComponent implements OnInit {
week: any = [
"Mo",
"Tu",
"We",
"Th",
"Fr",
"Sa",
"Su"
];
monthSelect: any[] | undefined;
dateSelect: any;
title: string | undefined;
range: any;
constructor() {
}
ngOnInit(): void {
this.getDaysFromDate(1, 2023)
}
getDaysFromDate(month: number, year: number) {
const startDate = moment(`${year}/${month}/01`)
const endDate = startDate.clone().endOf('month')
this.dateSelect = startDate;
const diffDays = endDate.diff(startDate, 'days', true)
const numberDays = Math.round(diffDays);
this.monthSelect = Object.keys([...Array(numberDays)]).map((a: any) => {
a = parseInt(a) + 1;
const dayObject = moment(`${year}-${month}-${a}`);
return {
name: dayObject.format("dddd"),
value: a,
indexWeek: dayObject.isoWeekday()
};
});
}
changeMonth(flag: number) {
if (flag < 0) {
const prevDate = this.dateSelect.clone().subtract(1, "month");
this.getDaysFromDate(prevDate.format("MM"), prevDate.format("YYYY"));
} else {
const nextDate = this.dateSelect.clone().add(1, "month");
this.getDaysFromDate(nextDate.format("MM"), nextDate.format("YYYY"));
}
}
html file
<div class="wrapper-calendar">
<div class="header-calendar">
<div>
<button (click)="changeMonth(-1)" class="btn-prev"><img src="back.png" alt="back"></button>
</div>
<h1>{{dateSelect | date:'MMMM yyyy'}}</h1>
<div>
<button (click)="changeMonth(1)" class="btn-next"><img src="forward.png" alt="forward"></button>
</div>
</div>
<ol>
<li *ngFor="let day of week" class="day-name">{{day | slice:0:3}}</li>
<li [style.gridColumnStart]="first ? day?.indexWeek : 'auto'"
*ngFor="let day of monthSelect; let first = first">
<span> {{day?.value}}</span>
</li>
</ol>
<br>
</div>

Answer 1

A possible solution will be to add additional property to the day entires, something like the following
...
getDaysFromDate(month: number, year: number) {
...
this.monthSelect = Object.keys([...Array(numberDays)]).map((a: any) => {
a = parseInt(a) + 1;
const dayObject = moment(`${year}-${month}-${a}`);
return {
name: dayObject.format("dddd"),
value: a,
indexWeek: dayObject.isoWeekday(),
selected: someFunctionThatReturnsBooleanBasedOnTheSelectionRange(a)
};
});
}
...
The someFunctionThatReturnsBooleanBasedOnTheSelectionRange should determine if the day is in the selected range, latter in the HTML you should add the following
<li [style.gridColumnStart]="first ? day?.indexWeek : 'auto'"
[ngClass]="{'selected-day-backround': day.selected}"
*ngFor="let day of monthSelect; let first = first">
<span> {{day?.value}}</span>
</li>
By using the ngClass directive you can add the custom background only to HTML elements that are part of the range.