Close Menu
  • Home
  • Learn
  • Web Hosting
  • Website Optimization
  • Elementor
  • Tech Jobs
  • Consultations NEW
  • More
    • About
    • Contact
    • Artificial Intelligence
    • CDN
    • Deals & Discounts
    • eCommerce
    • Movies & TV Shows
    • MyListing
    • Small Business
    • Themes & Templates
    • Tools
      • Internet Speedtest
      • VPN
    • Voxel
    • VPN
    • Web Hosting Services
    • Web Security
    • WooCommerce
    • WordPress
Tags
Analytics Archive auctions wordpress theme Backups Business business directory ChatGPT city guide classified Code Editors cPanel Crocoblock Deals directory Discord Discounts dokan ecommerce education wordpress theme Featured FTP Generative AI Google Cloud Google DeepMind grocery multivendor learning management system LiteSpeed Cache lms marketplace Matomo multi-vendor Opera PHP Plugin Update responisve shopify theme Sale SEO shop SSH Trending Updates Web Hosting woocommerce wordpress World Backup Day
Facebook X (Twitter) YouTube
Binary Blackboard
  • Home
  • Learn
  • Web Hosting
    LiteSpeed Cache vs WP Rocket

    LiteSpeed Cache vs WP Rocket

    August 3, 2023
    Storage racks aligned in a computer server room.

    Shared Web Hosting: Is It the Right Choice for Your Website?

    June 10, 2023
    Memorial day seal with the word deal next to it

    Memorial Day Weekend Deals

    May 25, 2023
    Woman holding a laptop as she works on web hosting servers

    Crucial Things to Know When Choosing Web Hosting Services

    March 27, 2023
    This is the A2 Hosting logo. It says “A2 Hosting Our Speed Your Success.”

    Switching to cPanel’s Jupiter Theme

    March 27, 2023
  • Website Optimization
    Logo for Elementor

    Automatically Clear Elementor Cache and Regenerate CSS

    July 25, 2023
    Screenshot of a macOS shortcut

    Website Speedtest macOS Shortcuts

    June 24, 2023
    New method accelerates data retrieval in huge databases

    New method accelerates data retrieval in huge databases

    March 15, 2023
    LiteSpeed Cache plugin settings dashboard

    LiteSpeed Cache Settings for Voxel

    March 9, 2023
    Logo for Redis Cache

    Are You Using Redis Cache on Your Website?

    March 8, 2023
  • Elementor
    Logo for Elementor

    Automatically Clear Elementor Cache and Regenerate CSS

    July 25, 2023
    Elementor helpful tips

    Unlock the Full Potential of Elementor with These 10 Advanced Tips

    May 20, 2023
    Logo for Elementor

    Master the Art of Web Design with Elementor Pro

    May 20, 2023
    Elementor CSS Print Method Settings

    What Is CSS Print Method in the Elementor Settings? Which Should I Choose?

    May 18, 2023
    Widgets for the Elementor page builder

    Remove Unused Elementor Widgets

    January 15, 2023
  • Tech Jobs
  • Consultations NEW
  • More
    • About
    • Contact
    • Artificial Intelligence
    • CDN
    • Deals & Discounts
    • eCommerce
    • Movies & TV Shows
    • MyListing
    • Small Business
    • Themes & Templates
    • Tools
      • Internet Speedtest
      • VPN
    • Voxel
    • VPN
    • Web Hosting Services
    • Web Security
    • WooCommerce
    • WordPress
Binary Blackboard
Home»Voxel»Add a Countdown Timer to Your Events in Voxel
Voxel

Add a Countdown Timer to Your Events in Voxel

January 31, 20232 Mins Read60
Facebook Twitter Pinterest LinkedIn Email WhatsApp Reddit
Screenshot of Voxel event post countdown timer
Difficulty

Easy

This post is for users of the Voxel framework. Check them out:  getvoxel.io

Adding a countdown timer to your events posts is a great way to give some nice visual interactivity to your website.

The really easy way

(Must have Elementor Pro):

Use the Elementor Countdown widget and set the date and time using the Voxel dynamic tag: Post -> Event date -> Upcoming -> Start date. Then use the Modifier “Date Format” and enter the following as the format: Y-m-d G:i

If you do not have Elementor Pro:

Use the Elementor HTML widget, and for the Dynamic Tag, I used:
Post -> Event date -> Upcoming -> Start date.

Visual Mode

Screenshot of the Voxel settings dynamic tag visual mode

Plain Mode

Screenshot of settings for Voxel dynamic tag plain mode

Once you add the dynamic tag, you would then use the modifier “Date Format” and enter the following “M d, Y g:i:s” (without the quotes). Here is some more information on the date format. and for the time javascript method I used.

Once the timer is done, It will display the text listed on line 34 in the code below. You can customize the text with CSS using the class “timer-done”.  

Also, customize the timer itself using the following: (Be sure to use the CSS class “event-countdown” on the HTML widget in the Elementor Advanced tab.

				
					/* ** Customize the CSS of the paragraph that appears once the timer is done */
.timer-done {
    color: #0000FF;
    font-size: 16px;
    font-weight: 600;
}

/* ** Entire timer CSS */
.event-countdown ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ** Individual timer containers */
.event-countdown ul li {
    background: #000000;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.9em;
    line-height: 1.4em;
    color: #FFFFFF;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    min-width: 5rem;
}

/* ** Timer digits */
.event-countdown ul li span {
    font-size: 1.4em;
}
				
			

Just add the code to a HTML widget

				
					<!-- 
// You can keep the paragraph below inside this Action List or use a seperate Elementor widget and use:
// CSS ID "timerDone" and CSS class "timer-done". 
-->
<p id="timerDone" class="timer-done"></p>
    
<ul>
    <li><span id="days">0</span> Days</li>
    <li><span id="hours">0</span> Hours</li>
    <li><span id="minutes">0</span> Minutes</li>
    <li><span id="seconds">0</span> Seconds</li>
</ul>

<script type="text/javascript">

    // ** In Visual mode the Dynamic tag for the line below will look like this: new Date("Start date").getTime();
    const end = new Date("@post(event_date.upcoming.start).date_format(M d\, Y g:i:s)").getTime();  // ** This is "Plain mode" in the Action List.
    const dayEl = document.querySelector('#days');
    const hoursEl = document.querySelector('#hours');
    const minutesEl = document.querySelector('#minutes');
    const secondsEl = document.querySelector('#seconds');
    const seconds = 1000;
    const minutes = seconds * 60;
    const hours = minutes * 60;
    const days = hours * 24;

    const timeX = setInterval(function () {
        let now = new Date().getTime();
        const difference = end - now;
    
        if (difference < 0) {
            clearInterval(timeX);
            // ** You can replace the string below "Event has ended" to whatever you like.
            document.querySelector("#timerDone").textContent = "Event has ended";
            return;
        }
    
        dayEl.innerText = Math.floor(difference / days);
        hoursEl.innerText = Math.floor( (difference % days) / hours );
        minutesEl.innerText = Math.floor( (difference % hours) / minutes );
        secondsEl.innerText = Math.floor( (difference % minutes) / seconds ); 
    }, seconds);
    
</script>
				
			

Please let me know if you encounter any issues.

Table Of Content

Table of Content

Share. Facebook Twitter Pinterest LinkedIn Email WhatsApp Reddit

Related Posts

Screenshot of Dynamic Business Hours Highlighting Based on Current Day - In Voxel

Dynamic Business Hours Highlighting Based on Current Day – In Voxel

Wordpress admin dashboard post list

Post List Admin Edit in Frontend Link for Voxel

Booking calendar

Indicate the Date Range Selected on a Booking Calendar in Voxel

Leave A Reply Cancel Reply

You must be logged in to post a comment.

Menu
  • About
  • Contact
  • Developer Tools
  • Deals & Discounts
  • Sitemap
  • Privacy Policy
  • Terms of Service
Tags
Analytics Archive auctions wordpress theme Backups Business business directory ChatGPT city guide classified Code Editors cPanel Crocoblock Deals directory Discord Discounts dokan ecommerce education wordpress theme Featured FTP Generative AI Google Cloud Google DeepMind grocery multivendor learning management system LiteSpeed Cache lms marketplace Matomo multi-vendor Opera PHP Plugin Update responisve shopify theme Sale SEO shop SSH Trending Updates Web Hosting woocommerce wordpress World Backup Day
Facebook X (Twitter) YouTube
  • Privacy Policy
  • Terms of Service
Copyright © 2025 - binaryBlackboard.

Type above and press Enter to search. Press Esc to cancel.