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
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.
