Javascript Function 用于在一天中的特定时间突出显示某些内容

Question

I have a spreadsheet that displays every member of my staff's name and what time their lunch break is. We use this list to assign them new cases that come in, but obviously we can't assign them a case when they are at lunch.

I would like to figure out a way to highlight or "gray out" their names when they're on lunch, and then change back when their lunch time is over.

Answer 1

I think you can use a conditional class with css and JavaScript maybe inside window.onLoad.. Something like that:

CSS:

.class{
...
}

.classHighLight{
...
}

JS:

window.onload = function() {
   var currentHour = new Date().getHours();
   var arrStaffs = Here you load your spreadsheet's hours

   arrStaffs.forEach((member) => {
       if(member.lunchHour == currentHour){
           document.getElementById(*Member's button ID*).className = 'classHighLight';
       }
   })
};

That way, when you visit the page, your onLoad function will highligth members that have the same lunchHour as the current hour. I dont't know your spreadsheet data layout, but I'm pretending you have something like:

Mike - 14 / Peter - 12

Hope it helps you:)