My approach involves using dateClass to highlight a specific time range on the calendar. This range is not selectable; rather, I simply identify the start and end dates and then proceed to highlight the range between them when the calendar is opened.
Here is my TypeScript code snippet:
RangeClass: MatCalendarCellClassFunction<Moment> = (cellDate, view) => {
if (view === "month") {
const date = cellDate.toDate();
return date >= mystart && date <= myend ? "range-class" : "";
}
return "";
};
For styling, here is the CSS used for the highlighted range:
.range-class {
background: white;
border: 3px solid orange;
}
When it comes to implementation in HTML, I utilize the following code with Angular Material:
<mat-datepicker [dateClass]="RangeClass" #picker></mat-datepicker>
In terms of visual representation, this is how the highlighted range appears: 1
However, I am interested in changing the selection style to something similar to either of these examples: 2 or 3
I am seeking guidance on how to achieve this new selection style. Can you help me with this?