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.






