Monday, May 16, 2016

Using Moment to Create a World Clock

If your client or your own company have offices across multiple time zones, collaborating with each other can be difficult. When you’re developing solutions for SharePoint, especially for global organizations, working with dates and times can be challenging but it doesn’t have to be. In this post I will show you how you can use a free tool to make handling dates much easier.

You may already be familiar Moment.js, a powerful tool that allows you to “parse, validate, manipulate, and display dates in JavaScript.” The best part about it? It’s FREE! But that’s not all. Moment does more than dates; Moment Timezone allows us to effectively manage a world clock too. The rest of this post will focus on an example that utilizes Moment TimeZone to effectively manage a world clock. Our finished product will look like this when we’re done.

Finished Product
clip_image002

First things first: navigate to momentjs.com and download the latest version of Moment. I recommend getting the min version to minimize load times in you SharePoint environment.
image

Once you have that, grab Moment Timezone as well. For this example we will be using moment-timezone-with-data.js. For some reason the button says “moment-timezone-2010-2020” but it downloads as moment-timezone-with-data.js

clip_image006

Now we want to store these files in the masterpage gallery. Open up SharePoint Designer and navigate to All Files > Catalogs > masterpage. In here create a new folder where you can store all of your assets. I like to create a folder that resembles the client’s name and use all lowercase for a clean URL. In this case, our folder name will be called “rightpoint”.

Within the rightpoint folder create another folder that will be called “js.” In here, we will store all of our JavaScript files. Drag and drop moment.min.js and moment-timezone-with-data.min.js into this folder.

Next, create another folder within the “rightpoint” folder called HTML. Create a blank HTML file called timezone.html. We will revisit this later.

Now we need to reference these files and there are two options here:

  1. Reference them in the master page.
    This is the ideal solution if you plan on adding this webpart in multiple places in the site collection. First, copy seattle.master and rename it something appropriate. You can store this within your “rightpoint” folder. It will create an HTML file along with it. Now simply add your references somewhere within the header.
    • a. If you are editing the .master file your references will look like this:
      <SharePoint:ScriptLink language="javascript" name="~sitecollection/_catalogs/masterpage/rightpoint/js/moment.min.js" runat="server" />
    • b. If you are editing the .html file your references will look like this:
      <!--SPM:<SharePoint:ScriptLink language="javascript" name="~sitecollection/_catalogs/masterpage/rightpoint/js/moment.js"  runat="server" Localizable="false"/>-->
  2. Reference them in your HTML file. This is ideal if you only plan to have the webpart on one page.
    Within your HTML file create header tags within the <html> tags. Then place your script references inside those like below:
    <script src="https://sitecollectionURL/_catalogs/masterpage/rightpoint/js/moment.min.js"></script>
    
    <script src="https://sitecollectionURL/_catalogs/masterpage/rightpoint/js/moment-timezone-with-data.min.js"></script>

Now that we have the files referenced it is time to start building the code. Add another <script> tag and enter the following JavaScript:

<script>



	var usdatetime = null,

	        usdate = null;

	        

	var eudatetime = null,

			eudate = null;



	

	var update = function () {

		

	    usdate = moment().tz('America/Chicago').format('h:mm a');

	    usdatetime.html(usdate);



	    eudate = moment().tz('Europe/Paris').format('h:mm a');

	    eudatetime.html(eudate);

	};

	

	

	$(document).ready(function(){

	    usdatetime = $('#usdatetime')

	    eudatetime = $('#eudatetime')

	    update();

	    setInterval(update, 1000);

	});



</script>

Walking through the code:

1. First create the variables. In this example we will add a time zone from America and one from Europe. There are two variables for each. The first one will be used when updating the time and the second one will be used for actually retrieving the time of that particular time zone.

var usdatetime = null,

usdate = null;

	        

var eudatetime = null,

eudate = null;

2. Next, create a function that will retrieve the time and also create a reference so we can update it later. The most important parts of this code are highlighted below. The actual time zone is highlighted first. This is where you will enter in the time zone that you want to retrieve. A full list of these can be found starting at line 599 of moment-timezone-with-data.js. The second highlighted section is the format in which you would like your data to appear. You can find a lot of examples of how these can be set up on the homepage of momentjs.com.

	var update = function () {

		

	    usdate = moment().tz('America/Chicago').format('h:mm a');

	    usdatetime.html(usdate);



	    eudate = moment().tz('Europe/Paris').format('h:mm a');

	    eudatetime.html(eudate);

	};


3. Finally, create a function that will update the time at an interval of every second. The red number is time represented in milliseconds and will tell the function how often to update the time. The green text within the quotes is important. This text must be the ID of the <div> that will display the time. After you add this function, close the script tag.

	$(document).ready(function(){

	    usdatetime = $('#usdatetime')

	    eudatetime = $('#eudatetime')

	    update();

	    setInterval(update, 1000);

	});


Next we will build the HTML markup. Almost all of this will be optional but the following code will give you a frame for the web part shown in this example. The divs with the class “Time” must exist for the JavaScript to properly display the time.

<body>

    <div id="timezonewp">

	

		<div class="europe">

			<div id="eudatetime" class="time"></div>

			<div class="eulocation location">Europe</div>

			<div class="euutc utc">UTC +1 hours</div>

		</div>

		

		<div class="unitedstates">

			<div id="usdatetime" class="time"> </div>

			<div class="uslocation location">U.S.A</div>

			<div class="usutc utc">UTC -6 hours</div>

		</div>

		

	</div>

</body>

And that’s it! For styling I threw a reference to a CSS file in the HTML file and also a reference to Google fonts. You can click the links below for the full JavaScript, HTML, and CSS files. Finally, you will need to add a class of “timezones” to the web part zone in the page layout. You can download all of the files in this post here.