@arakjin Yes, but by using another plugin with this functionality.
Have a look for something that displays content by role, then use this to either enclose the [open_now] shortcode or place within this shortcode.
Thanks, although I think there is misunderstanding
I was thinking about button that only admin or editor can see (the button itself is the easy part).
when he/she/it presses said button, it toggles content visible to guests.
For example: customer help-desk can open chat on webpage when he is available without setting opening hours.
@arakjin Okay, I understand now.
I think this functionality is outside of the plugin’s current specification – the handling of something that’s not the opening hours, rather another set of timings that may be automated or may be manually triggered.
I have written my own JavaScript that would fulfil this purpose – such as available telephone periods, however it’s all contained within the script and not on an easy-to-manage Dashboard or any manual process. Would you like me to share this with you?
That would be great!, please do.
@arakjin I’ll add a copy here shortly. It’s quite easy to see in the code. You’ll need to add this as a new file, append to an existing file or add to your theme’s additional JavaScript settings.
@arakjin I have enclosed the JavaScript I use to show the availability of a service. You can add this within your existing theme’s JavaScript file, or as a custom JavaScript, etc. It is in jQuery, but you can do some small changes to make it vanilla JavaScript.
Things to check and change:
- The time zone;
- Individual service periods for each day (this example has times for weekdays, Saturday and Sunday);
- The title attribute (if relevant);
- You can add something to replace the HTML using JavaScript/jQuery – this version keeps the same symbol, changing its style;
- The Styling and HTML is just a starting point.
JavaScript
function service_status() {
var date;
if (!jQuery('.service-status').length) {
return;
}
var date = new Date().toLocaleString('en-US', { timeZone: 'Europe/London' });
date = new Date(date);
jQuery('.service-status').each(function() {
if (date.getDay() == 6) { // Saturday
if (date.getHours() >= 9 && date.getHours() < 14) {
jQuery(this)
.removeClass('unknown')
.addClass('online')
.prop('title', 'Online')
}
else {
jQuery(this)
.removeClass('unknown')
.addClass('offline')
.prop('title', 'Offline')
}
return;
}
if (date.getDay() == 0) { // Sunday
jQuery(this)
.removeClass('unknown')
.addClass('offline')
.prop('title', 'Offline');
return;
}
// Monday to Friday
if (date.getHours() >= 9 && date.getHours() < 17) {
jQuery(this)
.removeClass('unknown')
.addClass('online')
.prop('title', 'Online')
}
else {
jQuery(this)
.removeClass('unknown')
.addClass('offline')
.prop('title', 'Offline')
}
return;
});
return;
}
jQuery(document).ready(function($){
service_status();
return;
});
CSS
.service-status.unknown {
color: #CCCCCC;
}
.service-status.online {
color: #65B847;
}
.service-status.offline {
color: #F68076;
}
I recommend enclosing an image, symbol, etc. with a span as follows (Unknown is the fall-back):
HTML
<span class="service-status unknown" title="Unknown Status">■</span>
Thanks. I’ll modify this to allow triggering service status via button.
