Skip to content
Hours of operation
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Open Hours

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.

What's it look like?

Open Hours rendered table

How to use Open Hours


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>

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>

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>
    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":     {}


Time format

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.

You can’t perform that action at this time.