Skip to content

Instantly share code, notes, and snippets.

@joshualyon
Last active November 1, 2022 19:54
Show Gist options
  • Save joshualyon/a4df0beacdc054d9321ce2cf9f1455a6 to your computer and use it in GitHub Desktop.
Save joshualyon/a4df0beacdc054d9321ce2cf9f1455a6 to your computer and use it in GitHub Desktop.
Basic International Clock for SharpTools
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment