I use dateClass to highlight the time range (this range is not selectable! I just get the start and end dates and when I open the calendar I highlight the range between them)
ts:
RangeClass: MatCalendarCellClassFunction<Moment> = (cellDate, view) => {
if (view === "month") {
const date = cellDate.toDate();
return date >= mystart && date <= myend ? "range-class" : "";
}
return "";
};
css:
.range-class {
background: white;
border: 3px solid orange;
}
html:
<mat-datepicker [dateClass]="RangeClass" #picker></mat-datepicker>
This is how I see it: 1
I want to change the selection style to something like this: 2 or 3
How can I do it?
CodePudding user response:
Style 1
.mat-calendar-body-selected {
background-color: black;
color: #fff;
}
.mat-calendar-body-in-range::before {
background: #cccccc;
}
style 2
.mat-calendar-body-in-range .mat-calendar-body-cell-content {
border: 3px solid orange;
border-radius: 0;
border-left-width: 0;
border-right-width: 0;
}
.mat-calendar-body-range-end > .mat-calendar-body-selected {
background-color: transparent;
border: 3px solid orange;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left-width: 0;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.mat-calendar-body-range-start > .mat-calendar-body-selected {
background-color: transparent;
border: 3px solid orange;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
border-right-width: 0;
}
Second one is hard you can fine tune it yourself, but the basic layout is done!