Lightweight Opening Hours Plugin For jQuery
File Size: | 8.41 KB |
---|---|
Views Total: | 2910 |
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.