Display Business Hours In The Webpage - jQuery Opening Times

Display Business Hours In The Webpage - jQuery Opening Times

Opening Times is a jQuery plugin that shows you to show your business information (open or closed) depending on the opening hours you specify in the JavaScript.

1. Load the minified version of the jQuery Opening Times plugin after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="openingTimes.jquery.min.js"></script>

2. Create an element to display whether your business is open or closed.

<h1>We are <span id="open_or_closed">...</span>.</h1>

3. Call the function on the element you just created and define the opening hours in the openingTimes option.

$(function() {
  $('#open_or_closed').openingTimes({
    openingTimes: {
      'Monday'    : ['08:00' , '17:00' ],
      'Tuesday'   : ['08:00' , '17:30' ],
      'Wednesday' : ['08:00' , '17:00' ],
      'Thursday'  : true,
      'Friday'    : ['09:00' , '18:55' ],
      'Saturday'  : ['09:00' , '12:00' ]
    }
  });
});

4. More configuration options.

$(function() {
  $('#open_or_closed').openingTimes({
    openString: "open",
    closedString: "closed",
    openClass: "open",
    closedClass: "closed",
  });
});

This awesome jQuery plugin is developed by charlesharvey. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 18.03.2018
  • Source