Add interactive calendar tooltip to Waybar clock

[robertobarreda]

Summary

• Added interactive calendar tooltip to Waybar clock module
• Tooltip displays current month with color-coded calendar elements
• Middle click switches between month and year view
• Mouse wheel scrolls through months and years
• Week numbers displayed on the right side

Details

The clock module now has an interactive calendar tooltip with:

• Month headers: Beige/cream colored
• Days: Light pink text
• Week numbers: Cyan with bold formatting (right side)
• Weekdays: Yellow/gold headers
• Today's date: Pink with underline and bold

Configuration implemented using Waybar Clock module documentation:
https://github.com/Alexays/Waybar/wiki/Module:-Clock#style

More info about setting locale vars:
Alexays/Waybar#3072 (reply in thread)

Month view:

Year view:

[sgruendel]

Already have that in my custom waybar.jsonc but didn't know about locale to make weeks start on Monday, thanks for that :) Tried to use "locale": "de_DE.UTF-8" but clock module didn't show up any longer after waybar restart, found Alexays/Waybar#3072 which brought me to run sudo localectl set-locale LC_TIME=de_DE.UTF-8 first, now it works.

[robertobarreda]

Indeed, it may require setting and generating the locales on your computer:

sudo localectl set-locale LC_TIME=en_GB.UTF-8
sudo locale-gen

[mghextreme]

This is so good! Changed locally, but would be awesome to have it by default...
Also, is there a way to have it open on click instead of hover?

[robertobarreda]

This is so good! Changed locally, but would be awesome to have it by default...
Also, is there a way to have it open on click instead of hover?

The problem is that all buttons are used:

• left; toggles clock and date view
• right: updates the timezone
• middle: toggles month and year view

[JaxonWright]

Any ideas on how to make this work with themes? Either existing colors from them or provide new variables for themes to hook into.

[robertobarreda]

Any ideas on how to make this work with themes? Either existing colors from them or provide new variables for themes to hook into.

The problem is that css values need to be harcoded into config/waybar/config.jsonc

[mghextreme]

The problem is that all buttons are used:

• left; toggles clock and date view

By default, yes. But personally I changed my clock to show both Date and Time (because I don't see a reason to show only one of them), and then removed the alt option, so Left Click is currently available.
So even if we can't set the default behavior to open the calendar, if it's possible for my use case, I would do it. If you have the info or direction on how I can achieve this and could share, would be great 🙏

[robertobarreda]

The problem is that all buttons are used:

• left; toggles clock and date view

By default, yes. But personally I changed my clock to show both Date and Time (because I don't see a reason to show only one of them), and then removed the alt option, so Left Click is currently available. So even if we can't set the default behavior to open the calendar, if it's possible for my use case, I would do it. If you have the info or direction on how I can achieve this and could share, would be great 🙏

Switch between month/year: https://github.com/robertobarreda/omarchy/blob/95f352ece182a6892729313861b30aac16107ca0/config/waybar/config.jsonc#L80 --> change to on-click

[Michallote]

This can't actually be implemented as is as it will break everyone's Waybar that does not use "en_GB.UTF-8" as their locale. Correct? At least it broke mine. And having that hardcoded into a config file is a no go. It could be left as "Su" first by default (unfortunately) and the locale line commented out so users can substitute their own.

Perhaps if you can get the locale value from the configuration, or if it is not conflicting by default then generate a migration script that does the suggested steps, using the user locale instead of en_GB.UTF-8:

Indeed, it may require setting and generating the locales on your computer:

sudo localectl set-locale LC_TIME=en_GB.UTF-8
sudo locale-gen

Also one concern with the current limitation you mentioned is that for some reason it is incredibly hard to read the months in light colored themes. From Risotto default theme for example:

Anyway awesome suggestion! I incorporated this into my setup I love it!

[Michallote]

Current colour scheme has poor readability on light colored themes.

[Michallote]

This line will make the clock disappear if your locale is different, could be left but commented out to suggest users on how to make the calendar start on monday.

[robertobarreda]

Good point. Updated.

[robertobarreda]

Current colour scheme has poor readability on light colored themes.

Would you mind recommending a set of colors you feel comfortable on light colored themes?

[DarrenVictoriano]

awesome, this is really nice.
also, how can I change the font size of the calendar popup?

I did this and it worked but I wonder if there's a better way of change the font size?

        "tooltip-format": "<tt><big><big>{calendar}</big></big></tt>",