Automatically highlight today’s business hours using simple CSS, and Vanilla JavaScript.
It uses the timezone that is displayed in HTML of the business hours.
The CSS
/* ***** This is the highlight color */
.current-day {
background-color: rgb(249,249,214);
}
Minified version of CSS
.current-day{background-color:rgb(249,249,214)}
The JavaScript
// ***** Goes by the listing timezone
function binaryGetCurrentDayInTimeZone(timeZone) {
const now = new Date();
const options = {
weekday: 'long',
timeZone: timeZone
};
return new Intl.DateTimeFormat('en-US', options).format(now);
}
function binaryHighlightCurrentDay() {
const timeZoneElement = document.querySelector('.ts-timezone');
const timeZone = timeZoneElement ? timeZoneElement.textContent.split(': ')[1] : 'UTC';
const currentDay = binaryGetCurrentDayInTimeZone(timeZone);
const dayElements = document.querySelectorAll('.ts-day');
dayElements.forEach(function(dayElement) {
if (dayElement.textContent === currentDay) {
dayElement.closest('li').classList.add('current-day');
}
});
}
document.addEventListener('DOMContentLoaded', function() {
binaryHighlightCurrentDay();
});
Minified version of JavaScript
function binaryGetCurrentDayInTimeZone(timeZone){const now=new Date();const options={weekday:'long',timeZone:timeZone};return new Intl.DateTimeFormat('en-US',options).format(now)}
function binaryHighlightCurrentDay(){const timeZoneElement=document.querySelector('.ts-timezone');const timeZone=timeZoneElement?timeZoneElement.textContent.split(': ')[1]:'UTC';const currentDay=binaryGetCurrentDayInTimeZone(timeZone);const dayElements=document.querySelectorAll('.ts-day');dayElements.forEach(function(dayElement){if(dayElement.textContent===currentDay){dayElement.closest('li').classList.add('current-day')}})}
document.addEventListener('DOMContentLoaded',function(){binaryHighlightCurrentDay()})
If you found this feature to be pretty cool. Please consider buying me a coffee so I can have more energy to make more cool stuff
