Lightweight Opening Hours Plugin For jQuery

Lightweight Opening Hours Plugin For jQuery

Yet another opening hours plugin for jQuery that is easy to customize to indicate your business or organization is open or close.

1. Create placeholder elements to display the current status and opening hours.

Current status: <div current-status-placeholder"></div>
We close/open: <div closing-in-placeholder"></div>

2. Place jQuery library, moment.js and the jQuery opening-hours.js plugin in the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment-with-locales.min.js"></script>
<script src="opening-hours.js"></script>

3. Define the opening times for your business.

var data = [];
    // monday (beware! 8.30 means 08:30, using decimal part than is bigger than 59 will generate warning!
    data[1] = [[8.30, 18.30]]; 
    // tuesday
    data[2] = [[8.30, 18.30]]; 
    // wednesday
    data[3] = [[6.30, 18.30]]; 
    // thursday
    data[4] = [[6,12.59],[16.35,16.39],[18.30, 19.30]]; 
    // friday
    data[5] = [[8.30, 18.30]]; 
    // saturday
    data[6] = [[8.30, 12],[14,18]]; 
    // sunday = closed
    data[7] = [[8.30, 12.59],[14,18]]; 

4. Activate the plugin and done.

$('.current-status-placeholder').openingHours({ 
  show: 'current-status', 
  hours: data 
});
$('.closing-in-placeholder').openingHours({ 
  show: 'closing-in', 
  hours: data
});

5. Specify the messages that will appear to your visiors depending on whether your business is currently open or not.

var messages = [];
    messages['open'] = 'open';
    messages['closed'] = 'closed';
    messages['closing_in'] = 'we are closing';
    messages['opening_in'] = 'we are opening';
    messages['tomorrow'] = 'tomorrow';
    messages['in'] = 'in';
    messages['days'] = 'days';
    messages['at'] = 'at';
    messages['hours'] = 'h.';
    messages['minutes'] = 'min.';
    messages['and'] = '';

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

  • Publication date: 07.04.2018
  • Source