Opening Hours JavaScript Module

A simple JavaScript module for displaying a business's opening hours and showing whether they are currently open.
Check it out here: Demo Link
<script> /* * This is a simple module for generating easy-to-read opening hours to * place on a website for a business. The module will display the hours, highlight the current day, * and indicate whether the business is currently open based on the user's time settings. * * Here's how to use it: * * 1. Simply include the styles (show here at the top). * 2. Then place your markup with whatever hours necessary (the example here also shows how you can include * split-hours where the business closes for a short time in the middle of the day). You can also easily * internationalize your page by translating the text appearing in the CSS and the markup. * 3. Finally, include the JavaScript (best if included at the bottom of the page or in an on-ready function) * * NOTE: This module depends on jQuery. */ </script> <style> .OpeningHours { font-family:Lucida Console; padding:0 10px 0 10px; display: inline-block; } .OpeningHours__Content { float:left; } .OpeningHours__Status { font-size:12px; } .Day--Today { color: #7Aa007; } .OpeningHours__Table tr td:first-child { font-weight:bold; } .OpeningHours__Status { display:block; margin-top:-1em; text-align:center; } .OpeningHours__Status:after { content:" open at these times:"; } .OpeningHours__Status--Open { color:green; } .OpeningHours__Status--Open:after { content:" open"; color: #6C0; } .OpeningHours__Status--Closed:after { content:" closed"; color: red; } .OpeningHours__Table tr td { padding:5px; } </style> <section class="OpeningHours"> <div class="OpeningHours__Content"> <div class="OpeningHours_Header"> <span class="OpeningHours__Status">We are</span> </div> <table class="OpeningHours__Table"> <tr class="Day--Monday" itemprop="openingHours"> <td>Monday</td> <td class="opens">11:00</td> <td>-</td> <td class="closes">15:00</td> </tr> <tr class="Day--Tuesday" itemprop="openingHours"> <td>Tuesday</td> <td class="opens">10:00</td> <td>-</td> <td class="closes">15:00</td> </tr> <tr class="Day--Tuesday" itemprop="openingHours"> <td></td> <td class="opens">17:30</td> <td>-</td> <td class="closes">20:00</td> </tr> <tr class="Day--Wednesday" itemprop="openingHours"> <td>Wednesday</td> <td class="opens">11:00</td> <td>-</td> <td class="closes">15:00</td> </tr> <tr class="Day--Thursday" itemprop="openingHours"> <td>Thursday</td> <td class="opens">11:00</td> <td>-</td> <td class="closes">15:00</td> </tr> <tr class="Day--Friday" itemprop="openingHours"> <td>Friday</td> <td class="opens">11:00</td> <td>-</td> <td class="closes">15:00</td> </tr> <tr class="Day--Friday" itemprop="openingHours"> <td></td> <td class="opens">16:30</td> <td>-</td> <td class="closes">20:00</td> </tr> <tr class="Day--Saturday" itemprop="openingHours"> <td>Saturday</td> <td class="opens">11:00</td> <td>-</td> <td class="closes">20:00</td> </tr> <tr class="Day--Sunday" itemprop="openingHours"> <td>Sunday</td> <td colspan=2>Closed <span style='display:none' class="opens">24:00</span> <span style='display:none' class="closes">24:00</span></td> </tr> </table> </div> </section> <script> (function(){ function formatTime(time){ var timeSplit = time.split(":"), timeHours = timeSplit[0]; timeHours = timeHours < 10 ? "0" + timeHours : timeHours; return timeHours + timeSplit[1]; } var currentDate = new Date(), weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], currentDay = weekday[currentDate.getDay()], currentTimeHours = currentDate.getHours(), currentTimeMinutes, timeNow, currentDaySelector, openTimes, closeTimes, isOpen = false; currentTimeHours = currentTimeHours < 10 ? "0" + currentTimeHours : currentTimeHours; currentTimeMinutes = currentDate.getMinutes(); timeNow = currentTimeHours + "" + currentTimeMinutes; currentDaySelector = ".Day--" + currentDay; //gets today's weekday and turns it into id $(currentDaySelector).toggleClass("Day--Today"); //hightlights today openTimes = $(currentDaySelector).children('.opens').map(function(){ return $.trim($(this).text()); }).get(); closeTimes = $(currentDaySelector).children('.closes').map(function(){ return $.trim($(this).text()); }).get(); $(openTimes).each(function(key, value) { var openTimeFormatted = formatTime(openTimes[key]), closeTimeFormatted = formatTime(closeTimes[key]); if(timeNow >= openTimeFormatted && timeNow <= closeTimeFormatted) { isOpen = true; } }); if (isOpen) { $(".OpeningHours__Status").toggleClass("OpeningHours__Status--Open"); } else { $(".OpeningHours__Status").toggleClass("OpeningHours__Status--Closed"); } })(); </script>

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Download this code in plain text format here