How to change the shape circle to square on any selecting and hover on any date in mat-datepicker in angular

Question

I want to change the shape of selecting and hovering on any date to square instead of circle

this is the calendar i need to change

Answer 1

It is quite tricky the first time. For the hover effect:

.mat-calendar-body-cell {
    &:not(.mat-calendar-body-disabled) {
        &:hover {
            >.mat-calendar-body-cell-content {
                &:not(.mat-calendar-body-selected) {
                    &:not(.mat-calendar-body-comparison-identical) {
                        // add your styles here
                    }
                }
            }
        }
    }
}

CSS:

.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover > 
.mat-calendar-body-cell-content:not(.mat-calendar-body- 
selected):not(.mat-calendar-body-comparison-identical) {
     // your styles here
}

For the selected day:

.mat-calendar-body-selected {
    // add your styles here
}

And in case you need it, for the circle that shows the day you are in:

.mat-calendar-body-today {
    &:not(.mat-calendar-body-selected) {
        &:not(.mat-calendar-body-comparison-identical) {
            // add your styles here
        }
    }
}

CSS:

.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat- 
calendar-body-comparison-identical) {
     // your styles here
}