Basic International Clock for SharpTools

InternationalClock.html

<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
{
  "schema": "0.1.0",
  "settings": [
    {
      "name": "timezone",
      "label": "Timezone (IANA format)",
      "type": "STRING",
      "default": "America/Chicago"
    },
    {
      "name": "tzInfo",
      "value": "<a href='https://en.wikipedia.org/wiki/List_of_tz_database_time_zones' target='_blank'>IANA format</a> is Region/Subregion",
      "label": "",
      "type": "LABEL"
    },
    {
      "name": "timeFormat",
      "label": "Time Format (dayjs)",
      "type": "STRING",
      "default": "LT"
    },
    {
      "name": "formatInfo",
      "value": "See <a href='https://dayjs.org/docs/en/display/format' target='_blank'>dayjs format</a> docs for more (eg. 'HH:mm' or 'h:mm a')",
      "label": "",
      "type": "LABEL"
    }
  ],
  "name": "International Clock"
}
</script>
<!-- Do not edit above -->

<div id="clock">--:--</div>

<script src="//cdn.sharptools.io/js/custom-tiles.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/timezone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/localizedFormat.js"></script>

<script>
  //setup the dayjs plugins
  dayjs.extend(window.dayjs_plugin_utc)
  dayjs.extend(window.dayjs_plugin_timezone)
  dayjs.extend(window.dayjs_plugin_localizedFormat)
  //setup the timezone variable with a default timezone
  let tz = "America/Chicago"
  let timeFormat = "LT"
  //and grab the clock element, so we can update it
  let clockEl = document.getElementById("clock");

  //wait for the SharpTools library to initialize, so we can grab the user defined settings
  stio.ready((data)=>{
    //if the user set a timezone, let's use it
    if(data.settings.timezone){
      tz = data.settings.timezone;
    }
    //and the time format too
    if(data.settings.timeFormat){
      timeFormat = data.settings.timeFormat;
    }
    //render the initial view of the clock
    render();
    //and schedule the periodic updates
    setInterval(render, 1000); //update the clock every 1 second - not too fast to cause performance issues, but quick enough that it ticks over on the minute close enough
  });

  //get the default browser locale
  const getLocale = () => (navigator.languages && navigator.languages.length) ? navigator.languages[0] : navigator.userLanguage || navigator.language || navigator.browserLanguage || 'en';

  //render (update) the clock
  let render = () => {
    let date = dayjs();
    options = {
      hour: 'numeric', minute: 'numeric',
      timeZone: tz,
      //timeZoneName: 'short'
    };
    clockEl.innerText = date.tz(tz).format(timeFormat)
  }
</script>

<!-- Add some basic styling for the clock to center it and make the fonts a reasonable size -->
<style>
  html, body { margin: 0; padding: 0; height: 100vh;}
  #clock {
    font-size: 22vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
</style>