CODEWITHSUNDEEP
angularangular-materialdatepicker
James
James

Reputation: 1456

Angular mat-datepicker Customize style hover days years and month

how i can customize datpicker style background color on hover day month and year and also background color of focus day month and year.

im importing this theme @import "~@angular/material/prebuilt-themes/indigo-pink.css"; even i changed the purple color in indigo-pink.css it style show me purple color i don't know where this color is set. and this my custome style i want to change the color to yellow :

.mat-focus-indicator:hover {
    background-color: yellow  !important;
}

.mat-calendar-body-today {
    background-color: yellow  !important;
}

.mat-calendar-body-selected {
    background-color: yellow  !important;
    color: black !important;
}

.mat-calendar-body-cell-content .mat-focus-indicator {
    background-color: yellow !important;
}

any help please0 im struggling with that since hours

Regards

Upvotes: 0

Views: 3556

Answers (1)

EstherSoftwareDev
EstherSoftwareDev

Reputation: 86

Depending on the structure of your app - you need to put those style declarations in the main CSS file. I am using this in SCSS:

.mat-calendar-body-cell-content {
    width: 60% !important;

    &.mat-focus-indicator {
        &:hover {
            background-color: #f5ae90 !important;
        }
    }

    &.mat-calendar-body-selected {
        background-color: $brand-main-orange;

        &:hover {
            background-color: #f5ae90 !important;
        }
    }
}

and I have placed this code in the themes.scss which is one of the main style files in my project. Colors have changed but there is still a little left over from the hover purple background color if I move the mouse too quickly, but still - for the most part it works.

Move your code to the main CSS file and it should work, if not also try using

:host

or

::ng-deep

Upvotes: 0

Related Questions