added show_timezone

README.md

@@ -10,6 +10,7 @@ A simple analog clock card for Home Assistant. Colors are based on your current
 | time_zone | string | **Optional** | The timezone you would like to display. If ommited your current device time will be used.
 | size | number | **Optional** | The size of the clock in px. Default is 300
 | disable_seconds | boolean | **Optional** | Disable the seconds hand
+| show_timezone | boolean | **Optional** | Display the timezone beneath the clock
 
 ## Example Configuration
 

dist/clock-card.js

@@ -11,8 +11,12 @@ class ClockCard extends HTMLElement {
             this.content.style.alignItems = "center";
             this.content.style.alignContent = "center";
             this.content.style.justifyContent = "center";
+            this.content.style.flexDirection = "column";
             this.content.style.padding = "5px";
-            this.content.innerHTML = `<canvas width="${clock_size}px" height="${clock_size}px"></canvas>`;
+            const current_tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+            var formatted_timezone = (config.time_zone ? config.time_zone : current_tz).replace('_', " ");
+            var timezone_html = config.show_timezone ? `<p style="font-size:20px">${formatted_timezone}</p>` : "";
+            this.content.innerHTML = `<canvas width="${clock_size}px" height="${clock_size}px"></canvas>${timezone_html}`;
             card.appendChild(this.content);
             this.appendChild(card);
             var canvas = this.content.children[0];