Any way to style the month/year header? I checked the documentation but ha

Directory Year Month Calendar Add-on
1

Any way to style the month/year header? I checked the documentation but haven’t found a way to do this as of yet. Thanks!

2

Hello.

If you want to apply the same style to all the headers, you can set a theme to the YearCalendar
yearCalendar.getElement().getThemeList().add("custom")

and define a style for vaadin-month-calendar:

:host([theme~='custom'] ) [part~='month-header'] {color: blue}

Currently it’s not possible to style month headers conditionally (i.e. April 2022 in red and May 2022 in blue). If you are interested in this feature, please let us know.

3

Thank you for the quick response. Currently, the calendar font-size is too small for my use. I was able to easily change the day font-size easily. However, I think having the ability to change the font size for the various labels, e.g month-year, day, week would be helpful and give the developer more controls over the calendar position and size.

4

The client-side component is based on Vaadin month-calendar, so it picks the styles from the application theme, and can be customized with CSS in the same way as any Vaadin component.

5

I understand. Thank you for your help.