Digital World Clock

Keith Mills
Giga Guru

‎02-06-2013 09:00 AM

I have had many clients complain about the quality of the World clocks on the homepages based on each browser type, and when one client requested that we try to provide a Digital clock version, I set out to build one. Here is what I have come up with, and seems to work fairly well so far.

This design on the World Clock contains two scripts.

UI Script - CoolClock_rjm (This is a new UI Script)
UI Page - example_cool_clock (This is the default page, just modified to include new code, suggest you make backups).

To Add / Change / Remove clocks on the Widget, you will need to modify the HTML Table in the UI Page, and then you will need to modify the UI Script to match the new clocks that you have added. This is done at the end of the UI Script in the function called worldClockZone

Things I am still Working on:

DST Time shifts do not automatically get changed, you will need to edit each Region yearly to identify when the DST shift occurs. This will require editing the following in each region section of the UI Script:

startDST.setMonth(#); //Month DST Starts
startDST.setHours(#); //Hour DST Starts
startDST.setDate(#); //Day DST Starts

endDST.setMonth(#); //Month DST Ends
endDST.setHours(#); //Hour DST Ends
endDST.setDate(#); //Day DST Ends

Ideally, I would like to setup some form of variable that maintains the next 20 years for this information, or keep it dynamic, but just don't have the time right now to figure this out.

The other thing I have not fully tested is all of the regions that are default in the script, as my client needed only Europe and North America.

If anyone is willing to improve on this, by all means have at it.

Digital Clock Installer.zip
  • 3,919 Views
8 REPLIES 8

Celliven
Giga Expert
In response to meghansmith

‎11-08-2016 06:32 PM

Hi Meghan



Have you tried this in the Helsinki release?



I have applied it and it appears to work, though I can't get it to pick up the offsets for the different time zones.



When I look through the script the syntax check often shows 'startDST' is already defined and 'endDST' is already defined.



I had the same issue using Keith's original script.



I am trying to display UTC, London, LA, and New York.


find_real_file.png



Have you had issues with multiple clocks?



Thanks



Chris


14 KB
0 Helpfuls

meghansmith
Kilo Expert
In response to Celliven

‎11-18-2016 07:05 AM

Hi Chris,



I haven't tried it in Helsinki - it was something my my personal dev instance which got reclaimed.   Do you mean it shows already defined when it writes this:



  if (region == "Australia"){


  var startDST = new Date();


  var endDST = new Date();



Because below that in each region, it shows the month, day, and hour to switch to DST.   Since the day/month changes each year, you'll need to update those for the current year.  


0 Helpfuls

Celliven
Giga Expert
In response to meghansmith

‎11-20-2016 06:09 PM

Hi Meghan



Thanks for the reply.


I am finding even applying Keith's original scripts there are strange thinks happening.


The results differ between Browsers and versions, even down to refreshing within the widget gets a different result to reloading the page.


If I try and change the time zone offset or the region it breaks all together.



I have raised it with ServiceNow directly as an enhancement to see if they will add it as a supported feature.



Thanks



Chris


0 Helpfuls

kristinacree
Mega Expert

‎08-26-2021 07:58 AM

So, after a few days of working on this. I created a UI page, which you will need to add to the sys_widget World Clocks area. I created a digital clock that doesn't do the math. You just need to know the timezone. This will do a live refresh every second of only this UI page via a SetInterval, it will not reload the entire page, or worry about DST. The divs are easily modifiable if you need to change the format or shape. 

This is working for me on SNOW Quebec patch 4 hotfix 2a, as of today. There are cleaner ways to do the HTML but wanted to share this for anyone else needing this on a dashboard or homepage.

find_real_file.png

Type: UI Page
Name: cool_clock_2
HTML: 
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<html>
<body>
<div id="IST" STYLE="color: #000000; font-family: Verdana; font-weight: bold; font-size: 12px; border-style: groove; width: 275px; margin-bottom: 10px; background-color: #60CEED;"></div>
<div id="UTC" STYLE="olor: #000000; font-family: Verdana; font-weight: bold; font-size: 12px; border-style: groove; width: 275px; margin-bottom: 10px; background-color: #9CF168;"></div>
<div id="EST" STYLE="olor: #000000; font-family: Verdana; font-weight: bold; font-size: 12px; border-style: groove; width: 275px; margin-bottom: 10px; background-color: #F7EA4A;"></div>
<div id="HST" STYLE="olor: #000000; font-family: Verdana; font-weight: bold; font-size: 12px; border-style: groove; width: 275px; margin-bottom: 10px; background-color: #FBC543;"></div>
</body>
</html>
</j:jelly>

Client Script: 
addLoadEvent(looptimer);

function looptimer() {
var date = setInterval(function() {
var element1 = document.getElementById('IST');
element1.innerHTML = "Chennai: " + new Date().toLocaleString('en-US', { timeZone: 'IST', hour12: false });
var element2 = document.getElementById('UTC');
element2.innerHTML = "UTC: " + new Date().toLocaleString('en-US', { timeZone: 'UTC', hour12: false });
var element3 = document.getElementById('EST');
element3.innerHTML = "Eastern: " + new Date().toLocaleString('en-US', { timeZone: 'US/Eastern', hour12: false });
var element4 = document.getElementById('HST');
element4.innerHTML = "Hawaii: " + new Date().toLocaleString('en-US', { timeZone: 'US/Hawaii', hour12: false });
}, 1000);
}

0 Helpfuls