Clocks and Time Zone enhancement

The Clocks and Time Zone enhancement allows you to add digital or analog clocks to a page in your digital workplace. These clocks display the current time in multiple time zones. Displaying this information can be useful when your organization has offices located in different parts of the world. This enhancement uses the HTML Content widget.

 If your digital workplace already has this enhancement, you can find configuration steps on your Styles page.   

Digital clocks showing the time in multiple time zones.
Digital clocks with iconography showing the time in multiple time zones.
Analog clocks showing the time in multiple time zones.

Sections in this article:

Considerations

Keep in mind the following when using the Clocks and Time Zone enhancement:

  • Automatic Updates: Clocks will not immediately update to represent the accurate time if a region changes how it observes time (e.g., if a country decides to stop using daylight savings time).
  • Icons: By default, digital clocks do not include icons. If needed, contact our Igloo team.

Set up the enhancement

To set up the enhancement for the first time, follow the steps below. To request this enhancement to be set up in your digital workplace, contact our Igloo team.

Add enhancement code to the header

Warning 

Adding code that contains errors can disrupt the functionality of your digital workplace. Use caution when adding code to this area.

Add the following code to the header of your digital workplace:

<!-- Clocks and Time Zone enhancement begins -->
<script src="https://igloo-prod.azureedge.net/cmedia/enhancements/analog-clocks/analog-clocks.js"></script>
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/analog-clocks/analog-clocks.css" />
<script src="https://igloo-prod.azureedge.net/cmedia/enhancements/timezones/clocks.js"></script>
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/timezones/clocks.css" />
<!-- Clocks and Time Zone enhancement ends -->

Change how time is displayed in digital clocks

Optionally, if you would like to change how the time is displayed in digital clocks, you can add the following code to the header: 

<script type="text/javascript">
   var timeFormat = "HH:mm:ss"
</script>

If you would like to change the format you can use the following table to identify the changes to the timeFormat variable: 

Time Type Short form Example
Month MM 01 02 ... 11 12
  MMM Jan Feb ... Nov Dec
  MMMM January February ... November December
Day of Month D 1 2 ... 30 31
  Do 1st 2nd ... 30th 31st
  DD 01 02 ... 30 31
Day of Week dd Su Mo ... Fr Sa
  ddd Sun Mon ... Fri Sat
  dddd Sunday Monday ... Friday Saturday
Year YY 70 71 ... 29 30
  YYYY 1970 1971 ... 2029 2030
AM/PM A AM PM
  a am pm
Hour H 0 1 ... 22 23
  HH 00 01 ... 22 23
  h 1 2 ... 11 12
  hh 01 02 ... 11 12
Minute m 0 1 ... 58 59
  mm 00 01 ... 58 59
Second s 0 1 ... 58 59
  ss 00 01 ... 58 59
Time Formats

Configure the enhancement

To configure the enhancement, you will need to make a series of decisions: 

  • Select whether the clocks are analog or digital.
  • Select the number of clocks you need.
  • Select what time zones to use. 

Once you know the answers to these questions, you can start configuring the enhancement. 

Configure the HTML widget for digital clocks

  1. Navigate to the page you want to edit. 
  2. Select Actions and then Edit. 
  3. Place an HTML Content widget on the page. See Placing and setting up a widget.
  4. Select Edit on the widget.
  5. In the Options tab, select More Misc, and then Code View. 

  6. Paste the following code into the editor window. 
     

       <ul>
    <li class="clock_container" data-timezone="America/Los_Angeles">
    <div class="lbl">Los Angeles</div>
    <span class="time digital">--:--</span>
    </li>
    <li class="clock_container" data-timezone="America/New_York">
    <div class="lbl">New York</div>
    <span class="time digital">--:--</span>
    </li>
    <li class="clock_container" data-timezone="Europe/London">
    <div class="lbl">London</div>
    <span class="time digital">--:--</span>
    </li>
    <li class="clock_container" data-timezone="Europe/Berlin">
    <div class="lbl">Berlin</div>
    <span class="time digital">--:--</span>
    </li>
    </ul>
  7. (Optional) If you need different time zones, you can update the data-timezone field with the appropriate time zones.  
    1. In the window, open your browser's developer tools. 
    2. In the console, type moment.tz.names().
    3. Locate the appropriate time zone. Copy and paste it into the data-timezone field. 
    4. Update the location in the code <div class="lbl">Berlin</div>.

  8. (Optional) You can add or remove clocks by copying and pasting or removing the code from the start of unordered list item <li... to the end </li>. For example:

      </li>
    <li class="clock_container" data-timezone="Europe/Berlin">
    <div class="lbl">Berlin</div>
    <span class="time digital">--:--</span>
  </li>
  9. In the Appearance tab, in Class, enter the following: clocks.
  10. Select Update. 
  11. At the bottom of the page, select Publish Page. 

Configure the HTML widget for analog clocks

  1. Navigate to the page you want to edit. 
  2. Select Actions and then Edit. 
  3. Place an HTML Content widget on the page. See Placing and setting up a widget.
  4. Select Edit on the widget.
  5. In the Options tab, select More Misc, and then Code View. 

  6. Paste the following code into the editor window. 
     

        <div class="container">
  	<div class="clock-container">
  		<div class="clock-title">Toronto</div>
  		<div class="clock" data-timezone="America/Toronto">
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks mark-num"><span class="num">1</span></div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks mark-num"><span class="num">2</span></div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks mark-num"><span class="num">3</span></div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks mark-num"><span class="num">4</span></div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks mark-num"><span class="num">5</span></div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks mark-num"><span class="num">6</span></div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks mark-num"><span class="num">7</span></div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks mark-num"><span class="num">8</span></div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks mark-num"><span class="num">9</span></div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks mark-num"><span class="num">10</span></div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks mark-num"><span class="num">11</span></div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks">
  				<br>
  			</div>
  			<div class="marks mark-num"><span class="num">12</span></div>
  			<div class="hours-hand">
  				<div>
  					<br>
  				</div>
  			</div>
  			<div class="minutes-hand">
  				<div>
  					<br>
  				</div>
  			</div>
  			<div class="seconds-hand">
  				<div>
  					<br>
  				</div>
  			</div>
  		</div>
  	</div>
  </div>
  7. (Optional) If you need different time zones, you can update the data-timezone field with the appropriate time zones.  
    1. In the window, open your browser's developer tools. 
    2. In the console, type moment.tz.names().
    3. Locate the appropriate time zone. Copy and paste it into the data-timezone field. 
    4. Update the location in the code <div class="clock-title">Toronto</div>.
  8. (Optional) You can add or remove clocks by copying and pasting the above code block multiple times or removing the entire code block above.
  9. In the Appearance tab, in Class, enter the following: analog-clocks.
  10. Select Update. 
  11. At the bottom of the page, select Publish Page. 

Turn the enhancement on

Once the code has been placed, the enhancement is ready to be used.  If you have already turned the enhancement off following the steps in the Turn the enhancement off section below, you can remove <!-- before and  --> after the middle lines and save the changes to the header. 

Turn the enhancement off

To turn the enhancement off, you can remove the code entirely or add <!-- before and --> after the middle lines, as shown below, and save the changes to the header. 

<!-- Clocks and Time Zone enhancement begins -->
<script src="https://igloo-prod.azureedge.net/cmedia/enhancements/analog-clocks/analog-clocks.js"></script>
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/analog-clocks/analog-clocks.css" />
<script src="https://igloo-prod.azureedge.net/cmedia/enhancements/timezones/clocks.js"></script>
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/timezones/clocks.css" />
<!-- Clocks and Time Zone enhancement ends -->

Changes to:

<!-- Clocks and Time Zone enhancement begins -->
<!-- <script src="https://igloo-prod.azureedge.net/cmedia/enhancements/analog-clocks/analog-clocks.js"></script>  -->
<!-- <link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/analog-clocks/analog-clocks.css" />  -->
<!-- <script src="https://igloo-prod.azureedge.net/cmedia/enhancements/timezones/clocks.js"></script>  -->
<!-- <link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/timezones/clocks.css" />  -->
<!-- Clocks and Time Zone enhancement ends -->

Use the enhancement

Members can view the predefined clocks in analog or digital styles.