You should to use this code in components > com_community > templates > jomsocial > layouts > events > list.php 🇦
`<script>
document.addEventListener('DOMContentLoaded', function() {
var countdownElements = document.querySelectorAll('.countdown');
countdownElements.forEach(function(element, index) {
var eventDateStr = element.getAttribute('data-event-date');
var eventDate = new Date(eventDateStr).getTime();
function updateCountdown() {
var now = new Date().getTime();
var distance = eventDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
element.innerHTML = days + " D, " + hours + " H, " + minutes + " M, " + seconds + " S";
if (distance < 0) {
clearInterval(intervalId);
element.innerHTML = "Start";
}
}
var intervalId = setInterval(updateCountdown, 1000);
});
});
</script>
`
It should also be added to the PHP loop that outputs each event:
<div class="countdown" id="countdown-<?php echo $event->id; ?>" data-event-date="<?php echo CEventHelper::formatStartDate($event, 'Y-m-d H:i:s'); ?>"></div>