Angular Datepicker - Change the date range selection style

Question

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?

Answer 1

Style 1

.mat-calendar-body-selected {
  background-color: black;
  color: #fff;
}
.mat-calendar-body-in-range::before {
  background: #cccccc;
}

forked stackblitz

---

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;
}

forked stackblitz

Second one is hard you can fine tune it yourself, but the basic layout is done!