Showing element based on time of day


I’m trying to create a schedule site where I highlight the event that’s happening right now, with a “Live now”-badge. I’ve made the schedule events as CMS items.

I know, there are a couple of threads on this topic. But none of them has fixed it for me.

  • Bonus question. Can I make the “Live-now” div appear and dissapear without having to reload the page? I guess that can be a pain if the schedule shows incorrect information just because the visitor hasn’t refreshed in a while.

Thanks in advance!

hi @Mr.Lindhe did you browse the internet about how to or you have just searched on this forum? Your question is about principles and there are many resources in JavaScript or jQuery.

This is a bit complex JS because of timezones and DST (Daylight Saving Time) to display data correctly.

you can start here:

to get into the picture about timezones :wink:

BTW, the best way to get accurate help is to follow the forum post guide that is pinned on top of each section, if you have missed it here they are.

When posting please:

  • Required: Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.
  • Upload as many screenshots/screencast videos as possible to help others help you faster
  • Add a description and/or post a link to a working example of what you’re trying to achieve
  • Reply to users by tagging using the @ sign followed by their forum username like this: @Mr.Lindhe

Good luck

Hi Stan,

Thanks for your reply. I would’ve wanted to post a read-only and published site link. The problem is I don’t feel comfortable sharing my whole site for a event that is not public yet. Neither to strip all the branding, classes and logos (with the risk of messing something up) to be able to show it here.

Sorry about the time-zone confusion. It’s just for visitors in the same time zone. So no problem there, I guess.

The whole point for me using Webflow is that it’s supposed to be a no-code tool for me as a non-developer. Therefore I don’t really feel like spending time getting a grasp of Javascript. My custom-code solution is more of a workaround to fix the lack of CMS filtering based on time of day (and not only days, months and years).

I feel your pain, as WF is misleading their future clients with “no-code” trick. WF is truly a “low-code” for developers . Of course WF allows clients push rectangles around the screen very easily but if they need something very basic in CSS that is not implemented in WF UI you need to use custom code. The same is about functionality that requires JS or animations or… You can always hire developer as it is their job they do for living. :person_shrugging:

Good luck

Webflow’s concept of “no-code” is really limited to a few basic things like the inline form submission responses, some of the nav behavior and certain cases where a current section is highlighted. That plus one big area which is interactions.

I think of that as fairly legitimate no-code for a pretty wide range of designer concerns.

BUT, for any dev concerns like form validation, integrations, scheduling, business logic, security… you’re on your own.

For this yes it’s possible using JS, and you can do it so that it happens in realtime, updating every 30 sec or so, but it’s all custom code. You’ll need to find a dev to build what you’re describing, or add a secondary platform like Wized that brings its own no-code framework.