angulare material datepicker problem with dateclass() - css

Question

i am using angular's datepicker to create a booking service.
I am experiencing a huge problem, when I make the reservation I activate a dialog that confirms the outcome of the reservation, if the outcome is positive another dialog opens with the confirmation. when you click on the button 'ok', to close the final dialogue and return to the datepicker, a call starts that takes all the customer's reservations and colors the dates blue.
here the chaos happens:
the dateClass () method inside the appcomponent.ts file is activated several times and cycles the old reservation list and not the new one.
I attached the code:
APPCOMPONENT.HTML
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Clicca sul calendario</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>
APPCOMPONENT.TS
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;
};
}
dialogConfirm.ts
click() {
const devCode = this.getQueryCode.getQueryParameter('d');
this.shareDate.device.deviceId = devCode;
this.postservices.getPrenotationList(this.shareDate.device).subscribe((resp1: GetDataResponse) => {
if (resp1) {
this.shareDate.foundDate = resp1;
for (const element of this.shareDate.foundDate.reservationdDates) {
this.shareDate.reservedDate.push(new Date(element));
}
}
console.log('resp1', resp1);
});
this.postservices.getPrenotationList(this.shareDate.device).subscribe((resp1: GetDataResponse) => {
if (resp1) {
this.shareDate.foundDate = resp1;
for (const element of this.shareDate.foundDate.unavailableDates) {
this.shareDate.unavailableDates.push(new Date(element));
}
}
});
}
I put console.log (), in the dateclass () and in click () when dateclass () starts, the log shows me that I have 3 reservations, when I make a reservation the click () log tells me that I have 4 reservations. but when I close the dialogue, dateclass () activates again and returns me to 3 reservations. if I close and restart the app it shows me 4 reservations ... what happens? what do I have to do?

Answer 1

Don't call function in template.Since dataClass input property expects MatCalendarCellClassFunction,assign function to dateClass property something like this.
component.ts
dateClass = (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;
};
component.ts
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Clicca sul calendario</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>