Modify font size for calendar card event time and title?

Configuration Frontend
1

Hello. I’m trying to increase the size of the event time and title for the calendar card so it’s larger for a wall mounted tablet. The CSS appears to be fc-event-time and fc-event-title. If I change these within Chrome Dev Tools, the font increases. Now I’m trying to override the CSS in my theme so it will apply automatically to the calendar card. Here is the code I’m using so far:

frontend:
  themes:
    main:
      fc-event-time: '20px'
      fc-event-title: '20px'

Then for the Calendar Card:

        cards:
          - type: calendar
            entities:
              - calendar.home
            initial_view: dayGridDay
            theme: main

I have reloaded the theme in HA and set the user account to use the ‘main’ theme. But the font size is not changing when I reload the page. Is this possible or am I going about it wrong?

Thanks

2

Solved the problem. Thanks to spacegaier on Discord for setting up a calendar card and figuring it out for me. It’s neither fc-event-time or fc-event-title. The item that needs to be changed is fc-small-font-size. Here here is what fixed it for me:

EDIT: Also spacegaier explained why this worked vs what I was doing. Awesome help!
“What you listed are CSS classes. Those cannot be used in themes. What I listed is a CSS var that is used in the existing rendering of the calendar.”

frontend:
  themes:
    main:
      fc-small-font-size: '20px'

cards:
          - type: calendar
            entities:
              - calendar.home
            initial_view: dayGridDay
            theme: main
2 Likes
3

Super dumb question but what file are you adding the frontend code?