I am using Relume Event Item Header 3. I cannot expand to work on two items on the same page. Currently, Relume Event supports only one item per page.
<script><br /><br />(function () {<br /> const second = 1000,<br /> minute = second * 60,<br /> hour = minute * 60,<br /> day = hour * 24;<br /><br /> // Set the target date and time for the countdown (format: "MM/DD/YYYY HH:mm:ss")<br /> const targetDateString = "06/16/2024 09:54:00";<br /> const targetDate = new Date(targetDateString).getTime();<br /><br /> const updateCountdown = () => {<br /> const now = new Date().getTime(), // Get the current date and time<br /> distance = targetDate - now; // Calculate the time remaining until the target date<br /><br /> // Update the HTML elements with the remaining time<br /> document.getElementById('days').innerText = Math.floor(distance / day);<br /> document.getElementById('hours').innerText = Math.floor((distance % day) / hour);<br /> document.getElementById('minutes').innerText = Math.floor((distance % hour) / minute);<br /> document.getElementById('seconds').innerText = Math.floor((distance % minute) / second);<br /><br /> // Check if the target date has already passed<br /> if (distance < 0) {<br /> clearInterval(interval); // Stop the countdown timer<br /> document.getElementById('days').innerText = '0';<br /> document.getElementById('hours').innerText = '0';<br /> document.getElementById('minutes').innerText = '0';<br /> document.getElementById('seconds').innerText = '0';<br /> // You can display an element at the end of the countdown with this ID<br /> document.getElementById('message').style.display = 'block';<br /> }<br /> };<br /><br /> // Initial call to update countdown<br /> updateCountdown();<br /><br /> // Update the countdown every second<br /> const interval = setInterval(updateCountdown, 1000);<br />})();<br /><br /></script>
I have accomplished the following. This is my solution. You just need to set the CMS variables to differentiate the data.
