I encountered an issue while using the datepicker from Material UI. The datepicker has a method called dateClass:
dateClass() {
return (date: Date): MatCalendarCellCssClasses => {
const unvailableArray = this.shareDate.unavailableDates;
const reservedArray = this.shareDate.reservedDate;
let day = 'freeDate';
for (const element of reservedArray) {
if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
date.getDate() === element.getDate()) {
day = 'prenotation';
return day;
}
}
for (const element of unvailableArray) {
if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
date.getDate() === element.getDate()) {
day = 'unavailable';
return day;
}
}
return day;
};
}
This method is located in appComponent.ts and allows me to color the calendar cells by cycling through a list of date arrays. It is invoked in the appComponent.html.
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Click on the calendar</mat-label>
<input matInput readonly [matDatepicker]="picker" [(ngModel)]="this.shareDate.myFormattedDate" (dateChange)="openDialog($event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [dateClass]="dateClass()" #picker> </mat-datepicker>
</mat-form-field>
I need to call this method inside another component to update the cell coloring. How can I achieve this? I tried importing appComponent.ts into the second component and invoking dateClass() but it didn't work.
Can you assist me in resolving this issue?