FlexClock Stack

A programmable realtime clock that can be used to show time/day-dependent content.
FlexTable Stack icon
Use this Stack to add a clock with date and/or time to your web page, and optionally show a message or Stacks of your choosing at a specific time each day. For example, you can use this Stack to show whether your help desk or storefront is open or closed. Update: set a time zone so that people around the world see your time.

How does it work?
Javascript is used to update the display and check whether the day and time should be used to show your Stacks.
  • FlexTable Stack screen shot
  • FlexTable Stack screen shot
  • FlexTable Stack screen shot
FlexTable Stack parameters
The FlexClock Stack has options to control the appearance of the clock, including 12/24hr format, seconds, date, as well as styling options such as font, size, and color. Additionally, each day has an option for customizing Stacks that will be shown within a specified time range, and outside that time range.

Parameters

 
Text colorDefault color of time and date text when custom day/hour coloring is not enabled or active (see below).
Font familyChoose a font for the time text, or select Other and provide your own font.
Other fontSelect another font to use for the clock text.
AlignmentLocate the time/date text within its div.
Client local timeCheck this to show the date and time using the client's computer, and not in a fixed time zone. Uncheck this option to show date and time for a specific time zone that you choose below.
Time zone offsetSelect a time zone offset from GMT (Zulu) time. When this option is enabled the time shown will be different on browsers around the world, but will represent the one selected time zone. Daylight savings is not supported, so manual selection is required.
Show timeCheck this to show time above the date if any.
Time scalingScale time text using Ems. 1.0 is default.
Bold textCheck this to enable bold font.
Show secondsCheck this to show seconds on the clock.
Flash secondsCheck this to flash the : on and off every other second.
24hr military formatEnable this to show time as 0:00 - 23:59. Disable this to show time as 12hr AM/PM.
AM/PM stringsSelect the style of AM/PM strings that follow non-military time. This is am/pm with or without a blank space separating it from the time. Uppercase can be set with the option below.
Uppercase timeCheck this to uppercase the time string (AM/PM portion), except for the suffix if any.
Time suffixAdd text immediately after the time. Useful for appending a time zone, or other text. You may wish to add a space to the start of this entry.
Show dateCheck this to show optional day and date, below the time if enabled.
Show daySelect any value other than No, to show the day name before the date string. Days default to English names but you may customize to any language using the Rename day options below. The Edit preview area will not reflect the actual Renamed day when abbreviated 3-letter days are chosen, as Monday is the default, but Preview and Publish will work.
Day separatorSelect the separator between the day and the date. Usually this is a comma, as Monday, July 25, 2016.
Date formatSelect the format of the date string such as January 1, 2015 or 01/01/2015, etc. The default is to allow the client to set this, based on locale. *As the client determines locale settings, the format is not predictable - an example is shown.
Date delimiterSelect the delimiter for date formats such as 01/01/2015 selected above.
Date scalingScale date text using Ems. 1.0 is default.
Date paddingSet the vertical padding/spacing between time and date text in pixels. This is ignored if time is disabled since it is only required to space date away from time.
Uppercase dateCheck this to uppercase the entire date string (date plus optional day), except for the suffix if any.
Date suffixAdd text immediately after the date. Useful for appending a time zone, or other text. You may wish to add a space to the start of this entry.
Responsive?Check this to enable responsive styling features. This enables various styling changes when the client width is smaller than the width selected below, such as the case for mobile. Use these features to resize the time and date, or optionally disable the date altogether.
Responsive widthClient width below which responsive behaviour begins.
Time scalingScale time on smaller client widths such as mobile. Value is in em. Has no effect if date is disabled.
Disable dateCheck this to disable the date for smaller client widths such as mobile. Only has an effect when date has been enabled above.
Date scalingScale date on smaller client widths such as mobile. Value is in em. Has no effect if date is disabled.
Date paddingSet the vertical padding/spacing between time and date for smaller client widths such as mobile. Has no effect if date is disabled.
Disable stacksCheck this to disable the customized daily Stacks, leaving only the time or date for smaller client widths.
Rename dayEnter a custom name to replace the default Sunday.
Customize Sunday?Enable this to color the clock text with a custom color on this particular day, or between specified times on this day. Optionally display a stack if enabled below.
ColorColor of time and date text on this day and optionally between the times specified.
Start timeStart custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the start of day 00:00.
Stop timeStop custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the end of day 23:59.
Add a stackEnable this to provide a slot for a custom stack that will appear during the time period above. Spacing to date or text is controlled by Stack Padding below.
Opposite stackEnable this to provide a slot for a custom stack that will appear outside the time period above. Spacing to date or text is controlled by Stack Padding below.
Rename dayEnter a custom name to replace the default Monday.
Customize Monday?Enable this to color the clock text with a custom color on this particular day, or between specified times on this day. Optionally display a stack if enabled below.
ColorColor of time and date text on this day and optionally between the times specified.
Start timeStart custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the start of day 00:00.
Stop timeStop custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the end of day 23:59.
Add a stackEnable this to provide a slot for a custom stack that will appear during the time period above. Spacing to date or text is controlled by Stack Padding below.
Opposite stackEnable this to provide a slot for a custom stack that will appear outside the time period above. Spacing to date or text is controlled by Stack Padding below.
Rename dayEnter a custom name to replace the default Tuesday.
Customize Tuesday?Enable this to color the clock text with a custom color on this particular day, or between specified times on this day. Optionally display a stack if enabled below.
ColorColor of time and date text on this day and optionally between the times specified.
Start timeStart custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the start of day 00:00.
Stop timeStop custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the end of day 23:59.
Add a stackEnable this to provide a slot for a custom stack that will appear during the time period above. Spacing to date or text is controlled by Stack Padding below.
Opposite stackEnable this to provide a slot for a custom stack that will appear outside the time period above. Spacing to date or text is controlled by Stack Padding below.
Rename dayEnter a custom name to replace the default Wednesday.
Customize Wednesday?Enable this to color the clock text with a custom color on this particular day, or between specified times on this day. Optionally display a stack if enabled below.
ColorColor of time and date text on this day and optionally between the times specified.
Start timeStart custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the start of day 00:00.
Stop timeStop custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the end of day 23:59.
Add a stackEnable this to provide a slot for a custom stack that will appear during the time period above. Spacing to date or text is controlled by Stack Padding below.
Opposite stackEnable this to provide a slot for a custom stack that will appear outside the time period above. Spacing to date or text is controlled by Stack Padding below.
Rename dayEnter a custom name to replace the default Thursday.
Customize Thursday?Enable this to color the clock text with a custom color on this particular day, or between specified times on this day. Optionally display a stack if enabled below.
ColorColor of time and date text on this day and optionally between the times specified.
Start timeStart custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the start of day 00:00.
Stop timeStop custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the end of day 23:59.
Add a stackEnable this to provide a slot for a custom stack that will appear during the time period above. Spacing to date or text is controlled by Stack Padding below.
Opposite stackEnable this to provide a slot for a custom stack that will appear outside the time period above. Spacing to date or text is controlled by Stack Padding below.
Rename dayEnter a custom name to replace the default Friday.
Customize Friday?Enable this to color the clock text with a custom color on this particular day, or between specified times on this day. Optionally display a stack if enabled below.
ColorColor of time and date text on this day and optionally between the times specified.
Start timeStart custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the start of day 00:00.
Stop timeStop custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the end of day 23:59.
Add a stackEnable this to provide a slot for a custom stack that will appear during the time period above. Spacing to date or text is controlled by Stack Padding below.
Opposite stackEnable this to provide a slot for a custom stack that will appear outside the time period above. Spacing to date or text is controlled by Stack Padding below.
Rename dayEnter a custom name to replace the default Saturday.
Customize Saturday?Enable this to color the clock text with a custom color on this particular day, or between specified times on this day. Optionally display a stack if enabled below.
ColorColor of time and date text on this day and optionally between the times specified.
Start timeStart custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the start of day 00:00.
Stop timeStop custom formatting at this time. Time format is HH:MM in 24-hour format. Blank is the end of day 23:59.
Add a stackEnable this to provide a slot for a custom stack that will appear during the time period above. Spacing to date or text is controlled by Stack Padding below.
Opposite stackEnable this to provide a slot for a custom stack that will appear outside the time period above. Spacing to date or text is controlled by Stack Padding below.
Stack paddingSet the vertical padding/spacing between date text and any custom stack in pixels. This is ignored if date and time are disabled since it is only required to space date away from them.
Examples
Check out examples of FlexClock
Example 1: you control the way hours and seconds are displayed …
Example 2: you control the way the date is display, and whether you even want to see the time …
Example 3: add Stacks to display on any days of the week between specified hours (the example below uses Text Stacks for the entire day, but you can add any number of Stacks, and set them to display during any time range, then specify other Stacks to show outside that time range!)
New, responsive update: note how the time/date behave when the browser window shrinks (try resizing your window) - you can resize time/date, disable the date, change spacing, and even disable the Stacks shown for each days time range …
It is Sunday in California!
It is Monday in California!
It is Tuesday in California!
It is Wednesday in California!
It is Thursday in California!
It is Friday in California!
It is Saturday in California!

FlexClock Features

  • Responsive
  • Requires JS
  • Sparkle updates

Purchase FlexClock

  • $6 USD via PayPal
  • Immediate download *