Add business hours of operation to your site
Open Hours lets you simply add your business' hours of operation to your site by defining a simple JavaScript object. It also determines the current day and highlights the day on visit. Open Hours doesn't have any dependencies and is written in plain JavaScript.
Download Open Hours into your project folder.
Link the file before the closing </body> body tag in your markup.
...
<!-- This assumes that the file is on the same level as the HTML file -->
<script src="./open-hours.js" charset="utf-8"></script>
</body>Add an element with the id of open-hours to the document
...
<div id="open-hours"></div>
<script src="./open-hours.js" charset="utf-8"></script>
</body>Then define your hours in a simple JavaScript object and pass it to OpenHours' generateTime() function. The keys must be in the format seen in the example below, where the first letter of the day of the week is capitalized. Open Hours also assumes that the order defined in the object is the order in which to render the hours of operation.
...
<div id="open-hours"></div>
<script src="./open-hours.js" charset="utf-8"></script>
<script>
const hours = {
"Monday": { start: 1000, end: 1800 },
"Tuesday": { start: 1400, end: 1800 },
"Wednesday": { start: 1100, end: 1900 },
"Thursday": { start: 1300, end: 1800 },
"Friday": { start: 1000, end: 1700 },
"Saturday": { start: 900, end: 1700 },
"Sunday": {}
}
OpenHours.generateTime(hours)
</script>
</body>The values for start and end accept Number values, it also assumes that the time is in 24 hour format.
So if your business starts at 9:00 AM and ends at 5:30 PM, you'll use something like this:
{
start: 900,
end: 1730
}If your business is closed certain days, simply pass an object for that day without any keys.
Open Hours is by Michael Lee. If you enjoy Open Hours, tip Michael some 🍺 beer money.