Countdown

The Countdown shortcode renders a live countdown (or count-up) timer. Add the class countdown to an element and set the target date with data-* attributes. It is built for launch pages, sale timers, and event dates.

Basic countdown

Give a target data-year (and optionally month/day) and a display data-format.

<div class="countdown" data-year="2026" data-month="12" data-day="31" data-format="dHMS"></div>

Key attributes

data-year: target year. If omitted, the timer bases off the current date.
data-month: target month 1 to 12 (defaults to 01).
data-day: target day 1 to 31 (defaults to 01).
data-hour: hours to add on top of the date (0 to 24).
data-minute: minutes to add (0 to 59).
data-second: seconds to add (0 to 59).
data-format: which units to show. Letters map to Days, Hours, Minutes, Seconds. Default dHMS. Examples: dHMS, dHM, dH.
data-since: set to true to count up from the date instead of down to it.
data-redirect: a URL to send visitors to when the countdown expires.

Format examples

The data-format string controls visible units. Uppercase letters show the labelled unit.

<!-- Days, Hours, Minutes -->
<div class="countdown" data-year="2026" data-month="10" data-day="31" data-format="dHM"></div>

<!-- Days and Hours only -->
<div class="countdown countdown-inline" data-year="2026" data-month="10" data-format="dH"></div>

Inline and large styles

Canvas ships several presentation styles you can combine with the base countdown class.

<!-- Inline, sits within a line of text -->
<div class="countdown countdown-inline ms-1" data-year="2026" data-format="dHMS"></div>

<!-- Large display -->
<div class="countdown countdown-large w-100" data-year="2026" data-format="dHMS"></div>

Additional item wrappers used across the demos include countdown-bordered-item, countdown-card-item, countdown-circle-item, countdown-dark-item, and countdown-minimal-item for styled variants.

Redirect on expiry

Send visitors somewhere when the timer reaches zero.

<div class="countdown" data-year="2026" data-month="1" data-day="1" data-redirect="launch.html"></div>

Count up (since a date)

<div class="countdown" data-since="true" data-year="2020" data-month="1" data-day="1" data-format="dHMS"></div>

Tips

Provide at least data-year so the target date is stable. Without it the timer anchors to the current date.
The data-hour, data-minute, and data-second values are added on top of the date, handy for short countdowns from "now".
Keep data-format short (dH or dHM) for compact inline timers, and use dHMS for full launch timers.
The plugin depends on moment.js and the countdown plugin, which Canvas loads automatically.

Usage

<div class="countdown" data-year="2020" data-month="7" data-day="15"></div>

Settings

Setting	Description
`data-format`	Choose a Date Format for your Countdown. You can select from a List of Formats available here: http://keith-wood.name/countdown.html . Simply navigate to the `Formats 1` and `Formats 2` Tab. Example: `dHMS`
`data-year`	Add a Countdown Year Example: `2021`
`data-month`	Add a Countdown Month Example: `8`
`data-day`	Add a Countdown Day Example: `15`
`data-hour`	Add a Countdown Hour Example: `12`
`data-minute`	Add a Countdown Minute Example: `30`
`data-second`	Add a Countdown Second Example: `30`
`data-redirect`	Add a URL to redirect to once the Countdown ends Example: `https://google.com`
`data-since`	Convert your Countdown to Countup by setting this Attribute to `true`. Make sure that all other Time Settings are set in the Past. Ex: `data-year="2019"` and `data-month="4"` Example: `true`

Extras

Language Settings using js/plugins.min.js File

Canvas concatenates its third-party libraries into js/plugins.min.js, loaded before js/functions.bundle.js. To localise a library (for example moment.js locales used by the countdown widget), load the locale file after plugins.min.js but before functions.bundle.js.

<script src="js/plugins.min.js"></script>

<!-- Add a moment.js locale so countdown labels are translated -->
<script src="https://cdn.jsdelivr.net/npm/moment/locale/fr.js"></script>
<script>
    if (typeof moment !== 'undefined') { moment.locale('fr'); }
</script>

<script src="js/functions.bundle.js"></script>

Order matters:

plugins.min.js (defines moment, jQuery, Swiper, etc).
Your locale/config overrides.
functions.bundle.js (which reads cnvsOptions and initialises widgets).

Global theme options still go in the cnvsOptions object defined before functions.bundle.js.

Language Settings via cnvsOptions

Canvas' JavaScript options live in a global cnvsOptions object that you define BEFORE functions.bundle.js runs. This is where you tune global defaults.

<script>
    var cnvsOptions = {
        menuBreakpoint: 992,
        pageMenuBreakpoint: 992,
        scrollOffset: 60,
        gmapAPI: '',            // Google Maps API key
        smoothScroll: false
    };
</script>
<script src="js/functions.bundle.js"></script>

For text that comes from plugin data-attributes (like fetch messages), set those per element. Examples:

<!-- Twitter widget loading message -->
<div class="twitter-feed" data-fetch-message="Fetching Tweets...">...</div>

<!-- Read more trigger labels -->
<div data-readmore
     data-readmore-trigger-open="Read More"
     data-readmore-trigger-close="Read Less">...</div>

Countdown formatting/labels come from its plugin (moment.js) via data-format on the .countdown element.

Was this page helpful?