Show online popup chat availability status

Question

On my website, I have a 'click to open chat button' on the bottom right of the website. I do not know if this is possible, but I would like to turn a DIV circle green (Online Status) monday to friday 9-5pm UK TIME.

/

SO BASICALLY at the moment, my javascript only detects the weekend. Monday- Friday, the button will turn green. How would I set the time aswell?

var div = document.getElementById('onlineStatus');
div.style.backgroundColor = 'green';     
var today = new Date();
if(today.getDay() == 6 || today.getDay() == 0) div.style.backgroundColor = 'red';

.onlineStatus {
  height: 20px;
  width: 20px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
}

<span class="onlineStatus" id="onlineStatus"></span> Click to contact us now!

What have you tried so far to get this done ? How are you getting the right dates and comparing them? — Nicolae Maties, Nov 25 '19 at 11:48
This will help:https://stackoverflow.com/questions/4822852/how-to-get-the-day-of-week-and-the-month-of-the-year — Prashant Pimpale, Nov 25 '19 at 11:51
Please don't make more work for other people by vandalizing your posts. By posting on the Stack Exchange network, you've granted a non-revocable right, under the [CC BY-SA 4.0 license](//creativecommons.org/licenses/by-sa/4.0/), for Stack Exchange to distribute that content (i.e. regardless of your future choices). By Stack Exchange policy, the non-vandalized version of the post is the one which is distributed. Thus, any vandalism will be reverted. If you want to know more about deleting a post please see: [How does deleting work?](//meta.stackexchange.com/q/5221) — Adrian Mole, Apr 30 '20 at 14:37

score 0 · Accepted Answer · answered Nov 25 '19 at 12:32

let div = document.getElementById('onlineStatus');
div.style.backgroundColor = 'green';     
const day = new Date().getDay();
const hours = new Date().getHours();
if(day === 6 || day === 0 || (hours < 9 && hours > 17)) {
  div.style.backgroundColor = 'red';
}

.onlineStatus {
  height: 20px;
  width: 20px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
}

<span class="onlineStatus" id="onlineStatus"></span> Click to contact us now!

Probably your problem right now it will remain if the page will be accessed from another timezone, you will need a server date and time.

Check this page: https://www.techrepublic.com/article/convert-the-local-time-to-another-time-zone-with-this-javascript/ — Nicolae Maties, Nov 25 '19 at 13:21

Show online popup chat availability status

1 Answers1