Skip to content

Instantly share code, notes, and snippets.

@weilu

weilu/README.md

Last active October 9, 2020 15:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save weilu/7688343 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save weilu/7688343 to your computer and use it in GitHub Desktop.
Download ZIP
World Clock widget for dashing
Raw
README.md

World Clock

screen shot 2013-11-28 at 12 29 37 pm

Description

A simple widget that's capable of displaying time for multiple locations around the world. In our company(neo), we use it to display time in different offices.

Installation

1. Download moment.js 2.5.1 from MomentJS,

2. Download moment-timezone.js 0.0.3 from Moment Timezone.

3. Build the timezone data for locations you are interested in: http://momentjs.com/timezone/data/ and save the data file as moment-timezone-data.js. Note that for the default timezone configuration(shown below in world_clock.cofee) to work, you will need to include timezone data of Asia, America and Europe when building moment-timezone-data.js.

4. Put all the downloaded files in your /assets/javascripts directory.

5. Include them in application.coffee in the following order:

#= require moment.min
#= require moment-timezone.min
#= require moment-timezone-data

6. The files world_clock.coffee, world_clock.html and world_clock.scss go in the /widget/world_clock directory.

7. Last but not least, add the widget html to your dashboard:

<li data-row="1" data-col="1" data-sizex="4" data-sizey="1">
  <div data-view="WorldClock" class="widget widget-world-clock"></div>
</li>
Raw
world_clock.coffee
class Dashing.WorldClock extends Dashing.Widget
# configuration
locations: [
{ zone: "Asia/Singapore", display_location: "SG", primary: true },
{ zone: "Asia/Jakarta", display_location: "JK" },
{ zone: "America/Los_Angeles", display_location: "SF" },
{ zone: "America/New_York", display_location: "NYC" },
{ zone: "Europe/London", display_location: "EDH" }
]
startClock: ->
for location in @locations
date = moment().tz(location.zone)
location.time = [date.hours(), date.minutes(), date.seconds()].map (n)->
('0' + n).slice(-2)
.join(':')
minutes = 60 * date.hours() + date.minutes()
totalWidth = document.querySelector('.hours').clientWidth - 1
offset = (minutes / (24.0 * 60)) * totalWidth
clock = document.querySelector("." + location.display_location)
if(clock)
['-webkit-transform', '-moz-transform', '-o-transform', '-ms-transform', 'transform'].forEach (vendor) ->
clock.style[vendor] = "translateX(" + offset + "px)"
if(location.primary)
@set('time', location.time)
, @
setTimeout @startClock.bind(@), 1000
setupHours: ->
hours = []
for h in [0..23]
do (h) ->
hours[h] = {}
hours[h].dark = h< 7 || h>= 19
hours[h].name = if h == 12 then h else h%12
@set('hours', hours)
ready: ->
@setupHours()
@startClock()
Raw
world_clock.html
<ul class="hours">
<li data-foreach-hour="hours" data-bind="hour.name" data-addclass-dark="hour.dark"></li>
</ul>
<ul class="locations">
<li data-foreach-location="locations" data-addclass-primary="location.primary" data-bind-class="location.display_location">
<div class="placeholder" data-hideif="location.primary"></div>
<div class="label" >
<div class="location" data-source="location.display_location" data-hideif="location.primary"></div>
<div class="location local" data-source="time" data-showif="location.primary"></div>
</div>
<div class="placeholder" data-showif="location.primary"></div>
</li>
</ul>
Raw
world_clock.scss
.widget.widget-world-clock {
$dark-text: #333;
$dark-background: grey;
font-size: 2em;
padding-top: 55px;
> ul li {
box-sizing: border-box;
display: inline-block;
color: $dark-text;
&.primary {
font-size: 2em;
margin-top: -185px;
.location {
margin-bottom: -10px;
}
.placeholder {
background: white;
}
}
}
.hours {
li {
background: white;
width: 4.16%;
&:not(:last-child) {
border-right: 1px solid;
}
}
.dark {
background: $dark-background;
color: white;
}
}
.locations {
text-align: left;
li {
position: absolute;
}
.placeholder {
height: 30px;
width: 2px;
background: $dark-background;
}
.label {
position: relative;
color: $dark-background;
.location {
margin-left: -50%;
&.local {
color: white;
}
}
.minute {
position: absolute;
top: 0;
}
}
}
}
@uday3110
Copy link

uday3110 commented Jul 29, 2015

Can someone please help me to get this widget working. I am using moment.js version : 2.10.6. and moment-timezone.js version : 0.4.0. I have these 2 lines in application.coffee for debugging

console.log(moment(1369266934311).zone('+0100').format('YYYY-MM-DD HH:mm'))
console.log(moment.tz("2013-11-18 11:55", "America/Toronto"))

the first line works correctly and displays a date in console.
The second console command does not work and displays the following message

TypeError: undefined is not a function (evaluating 'moment.tz("2013-11-18 11:55", "America/Toronto")') (anonymous function) global code

can please someone help me. I am going crazy over this.

@cob16
Copy link

cob16 commented Aug 31, 2015

Just a heads up if you are trying to get this to work when inserting:

#= require moment.min
#= require moment-timezone.min
#= require moment-timezone-data

make sure to place this BEFORE:

#= require_directory .

Else your .js files may not run in the correct order

@axlroden
Copy link

axlroden commented Aug 4, 2016

If you want a pre generated timezone data file ..
https://gist.githubusercontent.com/coryschires/6236126/raw/e5ac614aef16e6d57ab2e53a603f6135abf2b8e7/moment-timezone-data.js

@BillLortz
Copy link

BillLortz commented Mar 23, 2017

The pre-generated file that axlroden provided really helped me get this working. Unfortunately, moment.js's code has changed since the instructions were created for this tool. I played for a while and found the new moment.js and associated code works just fine and is maybe a bit simpler. These instructions tell you how to use the new code.

To start, make sure you don't have any of the moment.js, moment-timezone.js, or moment-timezone-data.js in the assets/javascripts directory. If one or more of those old files is present, they may load automatically and interfere with the new code. I tried renaming them instead of removing them and wound up with problems - so remove them.

If you go to the momentjs.com website, there are two major tabs - "Moment" and "Moment Timezone". You will need to load a file from each of those tabs.

  • From the "Moment" tab, download either "Moment.js" or "Moment.min.js". You don't need the locales version, but I suspect it would work.

  • From the "Moment Timezone" tab, download one of the two versions that includes years, the moment-timezone.js doesn't contain much of a timezone database. I downloaded "Moment-timezone-all-years.js" (you could probably load the min version to get better performance, or the 2010-2020 versions). The neat thing is that that file contains the code AND the database. So, you now only need two files.

  • Put those files in the assets/javascripts directory and edit application.coffee to include the two files you downloaded. The actual filename is different than the link name for the database. I added a "#= require moment" and "#= require moment-timezone-with-data". You don't need a third require for the database since the database is in the 2nd file.

Everything worked perfectly for me without changing the above coffee, html, or scss files. I now have a much more robust timezone database and I know it is current with regard to timezone rules.

Hopefully you'll find this helpful. I love this widget that weilu created and hope that others continue to use it.

@spynappels
Copy link

spynappels commented Mar 24, 2017

Thanks to BillLortz I've just got an instance set up and working, Awesome for distributed teams to keep an eye on the time in different offices.

@waa
Copy link

waa commented Sep 19, 2017

Thanks @weilu, this is really nice! A pretty unique display of time zones, I like it a lot!

Thanks @BillLortz for the post about the timezone files etc. This was what got everything finally working for me here.

@weilu, a suggestion perhaps: Can you consider having the Time zone tags be alternated high/low when they are very close? Currently they just overlap. For example, it would be cool when it can be detected that they overlap, to do something like this:

0  1  2  3  4  5  6
|  |              |
NY |             CEST
 Brazil

Nice work!

Bill

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment