Clock and Calendar Feature Requests

[guttermonk]

It would be cool if Clock and Calendar were separate modules, so that I could have a timezone tooltip for the Clock and a separate calendar tooltip for the Calendar. Right now, the only way to have a timezone tooltip is to put it in the same tooltip as the calendar. This would also help with styling the CSS for the Clock and Calendar separately.

Another feature request in the same vein, is to add a "timezone-alt" option for the clock, which would apply the timezone to just the "format-alt" clock. That way you can toggle between two timezones with just a click of the clock.

[hackedhead]

You can accomplish this by simply making two instances of the clock modules with different behaviors:

for example, clock that has a hover tooltip of a list of timezones and a date with a tooltip calendar.

The trick is the # pattern.
https://github.com/Alexays/Waybar/wiki/Configuration#multiple-instances-of-a-module

    "modules-center": [
        "clock#clock",
        "clock#calendar",
    ],
...
   "clock#clock": {
        "format": "{:%H:%M (%Z)}",
	"tooltip-format":"{tz_list}",
	"timezones": [
	    "America/New_York",	
	    "America/Chicago",
            "America/Los_Angeles",
	    "Europe/Belgrade",
       	    "Etc/UTC"
         ],
	"actions":  {
                    "on-click-right": "tz_up",
                    "on-click": "tz_down"
                    }
    },
    "clock#calendar": {
        "timezone": "America/New_York",
        "tooltip-format": "{calendar}",
        "format": "{:%Y-%m-%d (%a) || W%U}",
	"calendar": {
		"weeks-pos": "left",
		"on-scroll": 1,
		"mode-mon-col": 3,
                    "format": {
                              "months":     "<span color='#ffffff'><b>{}</b></span>",
                              "days":       "<span color='#ffffff'><b>{}</b></span>",
                              "weeks":      "<span color='#555555'><b>W{}</b></span>",
                              "weekdays":   "<span color='#ffcc66'><b>{}</b></span>",
                              "today":      "<span color='#448844'><b><u>{}</u></b></span>"
                              }
		},
	"actions":  {
                    "on-click-right": "mode",
                    "on-scroll-up": "shift_down",
                    "on-scroll-down": "shift_up"
                    }
    },

[guttermonk]

Wish there was a way to show the timezone abbreviation in the tooltip without showing it on the main clock in the toolbar. That said, this solution gets me 95% there. Thank you so much for the suggestion. It worked!

[guttermonk]

Just submitted a new issue for the issue I mentioned in my previous post and the extra space at the bottom of the timezone tooltip. #4329

[n-connect]

@hackedhead

Thx for sharing this config, I've missed the week numbers, and the scrolling option is good too.

Can you help finding out why the weekday line & the first week numbers are not in-line, with all the below ones? Eg. there are no "clean" columns? I've used your config for calendar. I've did not figure out how-to make screenshot though, tooltip gets gone when I press the screenshot button (grim -g "$(slurp)").

        "clock" :
        {
                "calendar": {
                "weeks-pos": "left",
                "on-scroll": 1,
                "mode-mon-col": 3,
                    "format": {
                              "months":     "<span color='#ffffff'><b>{}</b></span>",
                              "days":       "<span color='#ffffff'><b>{}</b></span>",
                              "weeks":      "<span color='#555555'><b>W{}</b></span>",
                              "weekdays":   "<span color='#ffcc66'><b>{}</b></span>",
                              "today":      "<span color='#448844'><b><u>{}</u></b></span>"
                              }
                },
                "actions":  {
                    "on-click-right": "mode",
                    "on-scroll-up": "shift_down",
                    "on-scroll-down": "shift_up"
                    },
                "format" : "{:%H:%M}",
                "format-alt" : "{:%y\u00b7%m\u00b7%d}",
                "rotate" : 0,
                "tooltip-format" : "{calendar}"
        },

[blind0wl]

In the calendar area, ensure you have <tt></tt>:

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

This will fix the spacing