Currently, I am working on an Angular project that involves dynamically populating a calendar. In addition to this, I have a range of dates and the task at hand is to modify the background for specific days within this date range. To manage dates effectively, I am utilizing Moment.js for date handling and Moment Range for managing date ranges.
In TypeScript, I have successfully implemented a function to check if a particular day falls within the specified date 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));
Nevertheless, when it comes to the HTML section, there is only one 'day' element that is constantly changing. I have a CSS class called class="background", which alters the background when applied in HTML. However, the challenge lies in accessing specific days accurately. How can I selectively highlight the days falling within the established range?
Typescript file snippet:
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)
}
// Function definition continues here...
HTML file snippet:
<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>
// HTML structure continues here...
</div>