CODEWITHSUNDEEP
cssangularangular-material
Alejandro
Alejandro

Reputation: 165

how to hide top button in mat calendar

I have a month year calendar but when i click on top button it displays me year, month and day how could i hide that button or tell calendar not to display days

look image

I was thinking on a css class that hides that element, whats the best way to do it?

this is the html

<button cdkarialive="polite" class="mat-calendar-period-button mat-button _mat-animation-noopable" mat-button="" type="button" ng-reflect-politeness="polite" aria-label="Choose month and year"><span class="mat-button-wrapper">JUL. 2019<div class="mat-calendar-arrow"></div></span>
    <div class="mat-button-ripple mat-ripple" matripple="" ng-reflect-centered="false" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div>
    <div class="mat-button-focus-overlay"></div>
</button>

here you can check this problem

https://stackblitz.com/edit/angular-wtbblu

Upvotes: 1

Views: 2844

Answers (1)

Patryk Łucka
Patryk Łucka

Reputation: 1043

In your case you can simply use

.example-month-picker .mat-calendar-arrow {
    display: none;
}

But remember that dialog renders in an overlay (not as a child of the component), so you have to define this css outside the component. In provided stackblitz example it can be styles.css.

UPDATED DEMO:

https://stackblitz.com/edit/angular-wtbblu-xzzk5x?file=styles.css

Upvotes: 2

Related Questions