Hide collection items based on system clock

Community resources General
1

I have a collection with the program for a conference. Something like this:

10:00 Doors open
10:30 Speaker 1
11:30 Coffee break
12:00 Speaker 2
13:00 Lunch
…

Each of these time slots is a collection item. Is it possible to filer the collection items in Webflow to hide the event that is finished and highlight whats next, based on the system clock on the device?

1 Like
2

There’s a “From now to” n “days in the future” Collection List filter but you have to check if it takes the time into account and not just the date.

1 Like
3

Hi Vincent

Unfortunately day is the smallest “time resolution” in this filter option :confused:

I’m getting help from a friend to make a custom script to solve this.

4

Oh snap, I thought it would be more precise…

Will you tell me the road you took with the script? I have the same issue: I’m displaying CMS schedules on TV screens with the CMS and I’d like to only show the next departures, not being obliged to keep showing all the departures of the day at all time on display.

5

Hi @vincent

At this point he just made a quick and dirty test to verify that it could be done. I pasted it in bellow. Far from what the end result will be, but I suppose it gives you an idea of the approach. I can send you the script when he makes the actual script, but that will probably not happen before the end of May!

<script>
function styleTime()
{
var timeArray = document.getElementsByClassName("program-text");
for (var i = 0; i < timeArray.length; i++)
{
  var entryString = timeArray[i].innerHTML;
  if (entryString.startsWith("13"))
  {
    timeArray[i].style.color = "red";
  }
}
}
</script>
1 Like
6

Did you ever get a working script to hide the Collection items that were past the current time?

7

Hi @jmonson

The site has been postponed, will post the script when its made :slight_smile:

8

Thanks!

Cheers,

Jordan Monson