Skip to content
Place a clock or calendar in your status bar
JavaScript CSS
Branch: master
Clone or download
Latest commit 7ecee1a Jun 22, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
images Reorganized images and updated paths in README Aug 30, 2017
lib changelog updated, style fixed for full-screen pr Jun 22, 2019
menus Added a menu item to toggle UTC mode Jul 6, 2017
styles Add full-screen-only option Jun 19, 2019
.gitattributes Update .gitattributes Oct 5, 2017
.gitignore new Dec 21, 2016
.travis.yml Updated .travis.yml to be the same as atom/ci Jun 19, 2017 changelog updated, style fixed for full-screen pr Jun 22, 2019 new Dec 21, 2016 changelog updated, style fixed for full-screen pr Jun 22, 2019
appveyor.yml appveyor ci added Jun 26, 2017
package.json Prepare 0.1.17 release Jun 22, 2019


Travis! AppVeyor! Deps! Installs! Version! License

GitHub stars GitHub forks

Display a customizable clock in the status bar.


The clock can be installed through Atom. Alternatively, you can use apm:

apm install atom-clock


  • Customizable time format and locale: any format and locale supported by moment.js is supported by atom-clock as well!
  • i18n: specify any locale to get the date in your language.
  • UTC time: show the UTC time instead of the local time.
  • Multi-platform package: the clock works with Linux, Windows and macOS.


Time format

It specifies the format to use when displaying the time. The package uses moment.js to format the time, so please refer to the related moment.js documentation. The default value for the time format is H:mm.


It specifies the locale the clock will use when displaying the time. Its default value is en. Please check the moment.js locale folder for a complete list of all supported locales.

Clock interval

It specifies how many seconds should run between two time updates, and it is defaulted to 60 (one update per minute).


If enabled, a tooltip will be shown when you hover over the time in the status bar to display the time in an alternate format. By default the tooltip is disabled, and the format is LLLL.


If enabled, both the status bar clock and the tooltip clock (if enabled) will display UTC time instead of local time.

Show icon

If ticked, a clock icon will be shown to the left of the time. It is unticked by default.

Full-screen only

If ticked, the clock will only be visible when in full-screen.

Some examples

format description display
H:mm default date format default
h:mm a am/pm format ampm
DD/MM/YYYY, H:mm short date format short
MMMM Do, dddd, h:mm:ss a long date format long
[Quarter] Q, MMMM Do YYYY, ddd, h:mm a space waster format useless


When a different locale is specified in the settings, the date language will change accordingly. A locale can be defined with its substring, and moment.js will take care of selecting the first locale it knows. A substring can be specified in many ways. As example, the Chinese locale for China can be expressed as zh-cn, zh_cn, zh-CN or zh_CN.

Here are some examples for locales different from English.

locale code display
Arabic ar locale_arabic
Belarusian be locale_belarusian
Tibetan bo locale_tibetan
Russian ru locale_russian
Chinese zh_CN locale_chinese_china


When enabled, the tooltip will contain an extended (and configurable) version of the current time/date.



The CSS classes of the clock elements allow you to customize the appearance of the clock using your styles.less file.

.atom-clock, .atom-clock-icon and .atom-clock-time

These classes allow you to change the appearance of the whole content of the clock (.atom-clock), of the icon only (.atom-clock-icon), or of the time only (.atom-clock-time). A simple entry in the styles.less file looks like this:

.atom-clock {
  color: red;

Atom clock customization

Editing the icon and the time separately:

.atom-clock-icon {
  color: red;

.atom-clock-time {
  color: green;

Icon and time customization


This class can be used to change the appearance of the tooltip content, in conjunction with .tooltip-inner.

.atom-clock-tooltip .tooltip-inner {
  color: orange;

Tooltip customization


Selective customization can be applied when the UTC time is enabled. This can affect both the status bar content and the tooltip content.

.atom-clock.atom-clock-utc {
  color: red;

  &:after {
    content: " (UTC)";

UTC Clock

.atom-clock-tooltip.atom-clock-utc .tooltip-inner {
  color: red;

  &:before {
    content: "(UTC) ";

UTC Tooltip


Like what you see? Please, feel free to fork this repository, and make any change you like. If you want to propose a nice feature, please create a separate branch on your fork, named after the feature you want to implement, then make a pull request from that branch. Also, before actually getting to work, just consider I'm trying to keep this package as simple and minimal as possible!

Hall of fame

A special THANK YOU to all the contributors of the project!

frasertmay (best contributor ever)



Save the clock tower!

Beerpay Beerpay Flattr this git repo

Save the clock

You can’t perform that action at this time.