Quick button to open / close for admins / users

@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.