Here are the components of my Calendar:
<div class="calendarWrapper mat-elevation-z1">
<mat-calendar [dateClass]="dateClass"></mat-calendar>
</div>
This is the scss for the custom class to be added:
button.orange {
background: orange;
border-radius: 100%;
}
And this is the TypeScript File for the component:
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { MatCalendarCellClassFunction } from '@angular/material/datepicker';
import { DateTime } from 'luxon';
import { ColorService } from 'src/app/_services/color.service';
import { AppointmentsDTO } from 'src/app/api/models';
import { WebsiteAppointmentsService } from 'src/app/api/services';
import { environment } from 'src/environments/environment';
@Component({
selector: 'bookings-element',
templateUrl: './bookings-element.component.html',
styleUrls: ['./bookings-element.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class BookingsElementComponent implements OnInit {
selectedDate: string = '';
appointments: AppointmentsDTO[] = [];
constructor(
public colorService: ColorService,
private appointmentsService: WebsiteAppointmentsService
) {}
ngOnInit(): void {}
async getBookings() {
return new Promise<void>((resolve) => {
this.appointmentsService
.getApiWebsiteAppointmentsGetAppointments({
date: this.selectedDate,
tenantid: environment.tenantId,
})
.subscribe((data: any) => {
if (data) {
this.appointments = data;
resolve();
console.log(this.appointments);
}
});
});
}
dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {
// Only highligh dates inside the month view.
if (view === 'month') {
const date = cellDate.getDate();
// Highlight the 1st and 20th day of each month.
return date === 1 || date === 20 ? 'orange' : '';
}
return '';
};
}
There seems to be an issue with adding the custom 'orange' class using the modified dateClass function. Everything else is functioning as expected except for the addition of the class to the buttons. One possible reason could be due to the asynchronous nature of the function, which waits for the API response.
The encapsulation method used in the TS-File appears to be correct, ruling out that as the source of the problem. The expected behavior is for the 'orange' class to be applied to the buttons when the isBooked condition in the dateClass function returns true.