1. Computer Skills

How to Create a World Clock App

Scroll to top
Read Time: 7 min

Such is the nature of my role that I find myself working not only with colleagues in the United Kingdom, but with those in Australia, Europe and the United States. These multiple timezones could easily hinder the planning of conference calls; I need a way to work out a convenient time for any team to get together on a Skype call.

In this tutorial, I’ll show you how to create a Dock icon that gives you ready access to the timezones that are important to you — and more besides. Whilst there are menubar applications that do this, in the Mac App Store, my method avoids adding another icon to your (already crowded) menu bar and it does not cost anything.

Before We Begin

Before we begin, we will need to ensure that we have the following:

  • An internet connection to access to via a web-browser
  • A suitable clock icon of 512x512px, or 1024x1024px for HiDPI (retina) displays
  • Fluid app

How We Create Our World Clock “App”

To create and customise our timezones is very straightforward. This is the process:

  1. We are going to be using a website called Time.Is where we will customise a web page for our own personal requirements.
  2. We will create a custom clock icon.
  3. We will then create an “app”, for OS X, using a handy little tool called Fluid app.
  4. We will locate our new app in the Dock.

1. Creating and Customising our Timezones

This part of the process is quite straightforward, involving little more than visiting a website and customising it to your particular requirements.

Step 1. Visit Time.Is

Visit the website, in a browser of your choosing, and will default to the current time in your timezone.

The websiteThe websiteThe website
The website

Step 2. Removing Timezones

In addition to your current timezone, the time being displayed in large letters, the website will also display the time in some other timezones. If the suggested timezones don’t meet your requirements, click on the one you wish to remove to change to that time and then click on the Remove from favorite locations link. Repeat this process for all timezones that you wish to remove.

Removing times zonesRemoving times zonesRemoving times zones
Removing timezones

Step 3. Adding Timezones

Envato is headquartered in Melbourne, Australia. I often need to know what time it is, down under, so this will be the first timezone that I need to add.

Adding timezones is very simple. Use the search box at the top of the webpage and enter the city for which you need to know the time. As you type, will suggest cities and will narrow these down as you continue typing.

Select the correct city and then click the Add to favorite locations link. Repeat this process for all the places that you need to know the time. Each time you add a city to favourite locations, a small box with the place and time will be added to your web page.

Adding timezonesAdding timezonesAdding timezones
Adding timezones

Step 4. Customising the Displayed Information

Given that I am in the United Kingdom, the way we display our dates and times will be different to the way in which, say, an American would be familiar. The site defaults to a format familiar to my American colleagues, but I would like to Anglicise it a little.

To do this, click on the More >> link at the top the page to reveal an extended menu and then select Customize to reveal the settings that can be changed.

One of the first things I’m going to do is correct the spelling by selecting British English. I am now customising things.

Customising the displayed informationCustomising the displayed informationCustomising the displayed information
Customising the displayed information

I can continue to change the way the date is displayed to the rather more logical DD-MM-YY. European users may wish to choose the, even more logical, ISO format of YY-MM-DD. You can choose whichever suits you best, or just stick with the default American MM-DD-YY format.

Choose whether you wish to retain the social buttons and whether you wish to invert the colour to white on black. When you are happy with your customisations, right-click on the link that says right-click on this link and copy it to your clipboard (CMD C). You may wish to paste your customised link into a text document for safekeeping. That said, as long as you permit browser cookies (which is the default behaviour of all the major web browsers) then your settings will be stored for next time you visit the web page.

Saving your customisationsSaving your customisationsSaving your customisations
Saving your customisations

2. Create a Custom Clock Icon

It is not imperative that you perform this stage, but if your intention is to put an icon on the dock, you might want it to fit aesthetically, too.

In order to create my icon, I took a screenshot of the Mondaine Swiss clock icon in the iPad Clock app. I then transferred this screenshot to my Mac.

Opening the screenshot in Pixelmator (you may use a different graphics editing app), I trimmed down the screenshot into a suitable image for an icon. For the purposes of OS X, your icon will need to be 512x512 pixels, or 1024x1024 pixels for a retina display.

Export your final image as a .png (Portable Network Graphic) file, ensuring that it has a transparent background. Make a note of the location to which you exported your newly created icon.

Using Pixelmator to create the app iconUsing Pixelmator to create the app iconUsing Pixelmator to create the app icon
Using Pixelmator to create the app icon

Tip: If you do not have the time, or the inclination, to create your own custom clock icon, feel free to use the Mondaine Clock that I created for this tutorial.

3. Create an “App” With Fluid App

Next, we are going to bring our customised web page and our custom icon together into an “app” which we will create using a handy app called Fluid, from Celestial Teapot Software.

Fluid allows us to create a Mac app by turning our web site into an OS X desktop app.

Step 1. Creating Your Custom App

Download and open Fluid app. Locate the customised URL string that you saved from Step 4 in customising the website.

Enter your customised URL and an appropriate name for your app.

Entering the criteria to create an appEntering the criteria to create an appEntering the criteria to create an app
Entering the criteria to create an app

Step 2. Attach Your Custom Icon

To create your app with your custom icon, select Other in the Icon field and browse to the location where your custom icon is saved.

Creating the appCreating the appCreating the app
Creating the app

Step 3. Create Your App

When you have entered the required information, click the Create button and then Launch now.

The Word Time app in the DockThe Word Time app in the DockThe Word Time app in the Dock
The Word Time app in the Dock

Your app will be created, placed in the Applications folder. An icon will be created on the Dock and the app will launch.

You may drag the app icon to wherever you want it to be located in the Dock. You can even drag it from the Dock if you prefer it not to reside there. If you wish to keep your time app in the Dock, right-click and check that it is pinned to the Dock (this should be the default behaviour).

Keeping the app in the DockKeeping the app in the DockKeeping the app in the Dock
Keeping the app in the Dock

Using Your Custom App

You now have ready access to your customised app giving you the current times in different timezones of interest. Knowing whether it’s OK to Skype call colleagues in Melbourne, Mammoth Lakes or Manchester is now just one click away.

Whether you choose to locate your time app in the Dock, or not, is up to you. Either way, remember that you can launch it very quickly if you use Spotlight or Alfred. Use the CMD Spacebar or Option Spacebar keys, respectively, to launch these apps. A great solution for people who find the keyboard more productive.

The end result.  (Note, you can continue to customise your "app" in the same way as described in section 1, step 4The end result.  (Note, you can continue to customise your "app" in the same way as described in section 1, step 4The end result.  (Note, you can continue to customise your "app" in the same way as described in section 1, step 4
The end result. (Note, you can continue to customise your "app" in the same way as described in section 1, step 4)

All Done!

Yes, there are apps out there that do a similar thing by putting access to global timezones into your Menu Bar, but they usually cost money and where’s the fun in that? Fluid app is much more flexible, so why not set up your global times zones, and more besides, and support Fluid app by purchasing a licence, if this works for you.

In this tutorial, I have shown how to customise a web app and create an "app" within OS X, using a tool called Fluid, to give quick and easy access to timezone information from the Dock. My approach frees your Menu Bar from additional icon clutter and it does not even require you to locate the app in the dock - you can use your favourite quick launcher to fire up access to global timezones whenever you need to know what time is it somewhere else.

Let us know, in the comments below, how you set up your timezones, or if you have any other tips or tricks.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Computer Skills tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.