Developer Docs - Mobile Docs - Countdown

M v1.0

Adding a countdown timer to your page is simple. There are several options for providing a date and time to the control.

String

Simply enter a raw date time value as a string.

Lava Filter

See the Lava documentation for more information.

Lava Shortcode

Utilize the scheduledcontent Lava shortcode.

{[ scheduledcontent scheduleid:'3' showwhen:'both' ]}
    
{[ endscheduledcontent ]}

Note: This shortcode's logic does take some overhead. You may consider caching the output if your page will be heavily visited, even if it's only cached for a minute or two.

Properties

Special CSS Classes

The countdown timer will add specific CSS classes as it gets close to completion. These are outlined below.

Avoid extensive styling changes to the countdown labels, as each second there's some processing happening to update the values. This can introduce a brief stutter while scrolling.

CSS X-Ray

While the countdown timer looks simple it's actually made up of a series of StackLayouts and Labels. This is to ensure that everything says aligned as the timer ticks. Below is a view of the various CSS classes available to you.

Note: Each unit of time is actually a .countdown-field though we only note it for clarity once above. Likewise each separator has the same classes.