"Now Playing" - Showing always the current Band playing now – or the one who will come next

For a music festival, I would like to have a little field that shows the current band playing “now” or the one, playing next.

I tried to sort my collection by «now» but it’s only possible to show the oldest or newest item of «today»

How to achieve this? Sorting by time isn’t an option in Webflow.

Any Ideas or code snippets?
I could make an end date/time field in the cms collection, if that would help.

Thanks a lot.


Here is my site Read-Only: (Webflow - Röntgenplatzfest)

As far as I can tell, sorting by time is automatic, if you have time as a part of your date field. So it’s relatively easy to list all of the bands playing today, in the order they’re playing.

Here’s a crude demo using Webflow’s biz template and blog posts;

https://preview.webflow.com/preview/datetime-sort?utm_medium=preview_link&utm_source=designer&utm_content=datetime-sort&preview=dfcaa2814b46bb95cd2a593a748f8fad&workflow=preview

The challenge is filtering. You can filter to show only events “TODAY and after”, but as far as I can tell, you cannot filter to “NOW and after.” That said, many people may want to look and see what bands have already played anyway, so that seems pretty useful unless you have hundreds.

So I’d just set the datetime each band starts, and sort ascending. If you really need to hide the older ones, you can, but it will take a bit of scripting and some creativity on how you pull the timestamps through for the scripts.

If you really wanted to get creative though, you could add a Now Playing indicator, which has the start time for each band as an ISO-8601 datetime in a custom attribute. It would be a small chunk emitted in an HTML Embed. Then, you could have a script on a timer, that every 30 sends goes through those now playing tags and hides/shows them so you can see which of the bands should be on stage now. A bit of programming work but a bit cleaner, because it won’t break entirely if the user’s local system clock is wrong.

Thank you for your reply.

The Sorting by Time is in the Programm-Overview already.
The idea is just a little Note. «Now Playing: Band XY» as a gimmic.

I try your idea with the custom attribute. Thanks.

Here’s a solution I think you’ll like;

First, a loom video to explain how everything works and how to tie it into your site.

Second the code;

The read-only link to my Webflow testbed project;

https://preview.webflow.com/preview/datetime-sort?utm_medium=preview_link&utm_source=designer&utm_content=datetime-sort&preview=dfcaa2814b46bb95cd2a593a748f8fad&workflow=preview

And the published site;

1 Like

Thank you Michael! A awesome help and the tutorial.
I’ll implement it tomorrow.

Dear Michael,
It helped and worked! I tweaked it a little and removed the extra timezone value because it seemed to work with the local time on my computer and the date and time of my collection field.

Thank you for the good explanation. Learned a lot.

I could not fork your CodePen, even with my CodePen pro account… maybe due to some restriction in your pen? I copy/pasted it. But I would rather give credits by forking it instead.

Thanks Boris, I’m new to Codepen Pro, that item was marked private so probably prevented forking. I’ve made it public and renamed it.

I’ll likely add it into my Webflow Utils library on GIT, it’s growing one function at a time.