CODEWITHSUNDEEP
angularangular-material
Samiul Alam
Samiul Alam

Reputation: 2434

How to change the casing of mat-calendar-period-button?

I have changed the format of the text of this button. The problem I am facing that it automatically changes the text to the upper case. I want to make it title case (just first letter is capital the rest of the letters are lower cases). Is there any way to do this?

enter image description here

Upvotes: 1

Views: 2084

Answers (2)

Greg
Greg

Reputation: 175

You have to use a bit of css there:

.mat-calendar-period-button {
  text-transform: lowercase;

  &::first-letter {
    text-transform: uppercase;
  }
}

Upvotes: 1

wnvko
wnvko

Reputation: 2120

This comes from MatCalendarHeader. Looking at the template the month and the year comes from periodButtonText. Looking further in the code perioduttonText is a getter and at the end they called toLocaleUpperCase. So there is no build in way to change this.

What you can do is change the calendar header with your template like is shown in this Stackblitz.

Upvotes: 0

Related Questions