clock module - change calendar background color

[e1kfL0ck]

I would like to change the calendar background color.

I did not find in the docs, but it seems doable as example 2 calendar.

Running Fedora with hyprland.

Thanks

[0x2aAs]

Since the shown calendar is just the tooltip of the clock module, you can add this to waybar/style.css

tooltip {
    background: rgba(30,35,35,0.85);
}

Of course you can specify the background with a hexadecimal value instead of rgba, but the example you mentioned has a slightly transparent background.
BUT: This style applies to every tooltip of any other module, however. I currently don't know, if you can style the tooltip per module with the CSS file.

Where the example uses <span color= in lines like these:

                    "format": {
                              "months":     "<span color='#ffead3'><b>{}</b></span>",
                              "days":       "<span color='#ecc6d9'><b>{}</b></span>",
                              "weeks":      "<span color='#99ffdd'><b>W{}</b></span>",
                              "weekdays":   "<span color='#ffcc66'><b>{}</b></span>",
                              "today":      "<span color='#ff6699'><b><u>{}</u></b></span>"
                              }

You can also use <span bgcolor= to change the background color per calendar element like months, days etc. This also works for other modules, but with this you cannot change the background color of tooltips as a whole, only parts of it.

[B2krobbery]

The calendar is rendered as part of the clock module’s tooltip, so its background is controlled by the global tooltip styling in Waybar.

You can change it using CSS like:

tooltip {
    background: rgba(30,35,35,0.85);
}

However, this applies to all tooltips, not just the clock/calendar.

If you want more control inside the calendar, you can use <span bgcolor=...> in the calendar format to style specific parts (days, months, etc.), but not the full tooltip background.

As of now, Waybar does not support per-module tooltip styling, so changing only the calendar background independently isn’t possible.