Lightweight Opening Hours Plugin For jQuery

Lightweight Opening Hours Plugin For jQuery
File Size: 8.41 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.