Lightweight Opening Hours Plugin For jQuery

File Size: 8.41 KB
Views Total: 2853
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.

How to use it:

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: [[8.30, 18.30]], // (beware! 8.30 means 08:30, using decimal part than is bigger than 59 will generate warning!
    tuesday: [[8.30, 18.30]],
    wednesday: [[6.30, 18.30]],
    thursday: [
        [6, 12.59],
        [16.35, 16.39],
        [18.30, 19.30]
    ],
    friday: [[8.30, 18.30]],
    saturday: [
        [8.30, 12],
        [14, 18]
    ],
    sunday: [] //closed (optional, if entry for a day is empty, it's assumed that it is closed)
};

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 = {
    open: 'open',
    closed: 'closed',
    closing_in: 'we are closing',
    opening_in: 'we are opening',
    tomorrow: 'tomorrow',
    in: 'in', // like in 2 days
    on: 'on', // like on Monday
    days: 'days',
    at: 'at',
    hours: 'h.',
    minutes: 'min.',
    and: '',
    weekDays: [
      'Sunday',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday'
    ]
};

Changelog:

2018-10-09

  • typo

2018-10-08

  • fix logic

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