nilFM
design and programming portfolio of Derek Stevens: drkste@zoho.com

Planetary Gears: lighweight world clock webapp in jquery


main view of planetary gears


Planetary Gears is a world-clock, timer, and calendar webapp written using jquery, fuse.js, and moment-timezone. I wrote it for a client and released it under the 2-clause BSD License back in November 2019. Since I have a moment, I am doing an expose` of the app here.

The basic view is as above, and searching for a timezone brings up a list of possible matches:


view of the autocomplete search function


You can click on any option in the autocomplete box to select it and add it to the table, or just press Enter to add the first match.


view of the main table with another timezone added


You can add as many rows to the table as you want, and change the paramters like whether "now" is centered in the time interval or the beginning of the time interval, how large the interval is, and whether time is displayed in 12 or 24 hour format.


view of the same table with the Japan timezone moved to the top


Using the buttons on the left edge of the table you can change the order of the zones or remove them.

Time blocks are one-hour long but not necessarily starting on the hour! Irregular timezones are properly calculated using moment-timezone. The blocks are color-coded, showing early, work, and late hours, as well as weekends.


view of the calendar function


The calendar part of the app displays a month-by-month calendar or year-by-year. You can easily use the control forms at top to change the mode and the displayed month/year. The current day is hilighted on the calendar if applicable.


view of the timer function


There is also a simple timer/stopwatch function in the app. The timer goes up to 24 hours and optionally plays a chime when the time's up. The stopwatch has a lap counter like a real stopwatch, in case you need it.

An instance of Planetary Gears is always running on this server at nilfm.cc/gears, and if you want to run it on a server of your own, you can clone the git repository and drop it anywhere in your server's document hierarchy. Any bug reports or feature requests, let me know! And enjoy :)