[JS+Editor Module] Bubble Calendar Enhanced

[Clooos]

Bubble Calendar Enhanced

Version: v1.1.0
Creator: Clooos

Important

Supported cards:

• Calendar
• Button

Displays the current time and date at the bottom of any button or calendar card while bringing a refreshed, modern design to your calendar card (with many options including multiple layouts, custom sizing, colorful gradient backgrounds...).

What this module do

• Live clock and date
  Synced to your Home Assistant locale and time format, so it supports any languages

• Works on button cards too
  Not just calendar cards, attach it to any button card for a stylish clock widget

• Multiple layout modes
  Default, square, date & time only, date & time only square...

• Alignment control
  Left, center, or right alignment for the time and date

• Custom sizes
  Set the time and date font sizes using any CSS value you like

• 12/24h format
  Force 12-hour or 24-hour clock independently of your system settings

• Show seconds
  Optional seconds display for those who want precision

• Date formatting
  Control the weekday, month, and year format (short, long, numeric, or off)

• Uppercase date
  Optional all-caps date

• 14 gradient background presets
  But you can also make it transparent

• Custom background
  Enter any valid CSS gradient or color directly if the presets aren't enough

• Background opacity
  Fine-tune the background intensity if needed

• And more...

Enjoy this module!

Cheers! 🍻

---

🧩 Get this Module

If you like this module and want to support my work, you can find it on my Patreon. Bubble Card keeps growing, and your support helps me spend more time adding new features and fixing bugs ❤️

By joining my Patreon, you also get access to all my other exclusive modules!

A big thank you to everyone already supporting me. Your messages and feedback mean a lot and really push me to keep improving Bubble Card and releasing new features for free for the community. Cheers! 🍻

---

How to install

1. Download the module
   Download the YAML file for this module from the bottom of the Patreon post.

   

2. Open your Bubble Card editor
   Go to the card where you want to use the module.

3. Import the module
   In the Modules section of the editor, click on Import from YAML, paste the contents of the downloaded YAML file, then click Import Module.

4. Configure as needed

---

Screenshot:

14 gradient background presets:

This module is the one I use for my own dashboard (I’m still working on it, an HA dashboard is never really finished… you probably know what I’m talking about 🫠). I'm planning to share it on my Patreon when it's done!

[DerHerzog7]

Hi Clooos.

This is what I meant on Patreon. To get the calendar and weather module side by side the weather module looks quite cramped.

Any suggestions?

[Clooos]

It doesn't looks that cramped to me, but have you tried playing with "Max items" and "Min column width in px? This way you can have 4 weather values instead of 3.

[Clooos]

Bubble Calendar Enhanced v1.1.0

• Changed date formatting to better align with Home Assistant locale behavior by respecting the HA date order preference instead of relying only on the language.

• Changed the "Alignment" selector so "Default" works correctly in the editor.

• Changed the naming of the “Date and time only” no-card layouts to stay consistent with the rest of the new layout values.

• Added new layout variants: time_only, time_only_square, date_only, date_only_square, calendar_only, calendar_only_square.

• Added “no card” layout variants: time_only_full, time_only_full_square, date_only_full, date_only_full_square, date_time_only_full, date_time_only_full_square.

• Added a Date order dropdown in the editor with Default (Home Assistant), DMY, MDY, and YMD override options.

• Added backward compatibility in the runtime for older layout values so existing configs do not break.

[TheFrogDaddy]

I love the changes, but sadly for me it's still not usable until I can show today/tomorrow etc even when no events. This calendar is the number one thing used on our family dashboard and for us it's confusing and sometimes can cause a panic to have days missing when there is nothing on. "Omg I need to pick my up boy from Karate today.... oh no hold on thats 2 days away" etc..

I will try and write a module when I find time as don't see that anybody else has.

Honestly love the work you do and I'm a patreon supporter so dont take this as moaning, just some honest customer feedback. :)

Edit: Just found this: #2292

[Clooos]

Hi! Thank you for the feedback and I don't take this as moaning don't worry 😄

I had myself some panic attacks when I started using it, then my wife and I learned that we need to check today's date first. I personally prefer to see the upcoming events first to not miss anything, but like I said in the other post, adding this option makes sense 👌

[TheFrogDaddy]

Totally get that, thats where number of days to show and rows comes in. As it's so important to us, it's approporately sized:

(Calendar card pro with some styling to try and make it look bubble ish :))