How can we help?

New post
1

Add a clock klip

Avatar
Jean-Edouard Babin
None
Follow
It would be great to have a simple klip that can display the time for a selected timezone Leftronic.com provide a such widget
Date Votes

10 comments

  • 0
    Avatar
    Gavin Boyt
    I am aware this can be done some how, by embedding a page from another site, but it would be tons better if it was incorporated in the standard features
  • 0
    Avatar
    Chris Moyer
    I was able to create a Clock Widget myself using the TODAY() and DATEFORMAT() functions, but it doesn't automatically update with date changes. I'm not quite sure how this can be fixed without just making a custom HTML widget.
  • 1
    Avatar
    Chris Moyer
    I've been able to create a very simple Clock widget using the "HTML" widget. Here's the code: https://jsfiddle.net/ws7bndeo/ Copy the HTML part into the HTML section of the widget, and add the JavaScript part to the script portion. That's all you need for a quick clock widget!
  • 0
    Avatar
    Office Dashboard
    HTML template cool for that, thank you
  • 0
    Avatar
    Erik Åkerlund

    Is it possible to get a 24 hour clock?

  • 0
    Avatar
    Edwin Lung

    Hi Chris, after the update, I guess the script doesnt work anymore. Could u help ?

  • 0
    Avatar
    Chris Moyer

    If you wanted a 24-hour clock instead, just remove this part of the JS snippet:

     

    if(hours > 12){
      hours = hours - 12;
    }

     

    The clock widget is still working for me, however it's not nearly the same size as it use to be. I'm guessing Klipfolio changed some of their classes.

     

    Here's an updated version: https://jsfiddle.net/cmoyer/ezrf87ub/2/

  • 0
    Avatar
    Edwin Lung

    Thank you very much Chris. 

    Yup, we cannot have the same size again, still looking for solution from their support =( , the previous style was so good.

  • 0
    Avatar
    Larona Nyambe

    You can add a font-size to the layout-cell DIV : 

    <div class="layout-cell" style="margin: 0px; color: #F07C26 ; height: 58px; font-size:58px; font-weight:bold">

    Hope that helps. 

  • 0
    Avatar
    Meggan King

    We recently introduced more font sizes. Using Chris's example, look for this line:

    label-inner align-c label-size-3 cx-color_444

    And just adjust the size class:

    label-inner align-c size-large cx-color_444

     

    We have xx-small - xx-large

     

    - Meggan

Please sign in to leave a comment.