CMS Date/Time Conditional Formatting

Hello everyone,

I was wondering whether I could get some advice/help with a project I’m working on. I’m not new to Webflow but I’m still learning and I’m currently in the Figma design phase for a project for a local event, in which they want to list their event programme online across the 4 days of the event. Each day has an average of about 50 event items and each day has been split across 4 pages. What I would like to know is if there is a way of conditionally styling the collection so that if the event listing has passed it has 50% opacity or if it’s happening at the time the user is looking at the listings the colour outline is different.

Now I know there is a way of doing conditional visibility so items can be hidden/shown if they have passed a certain time or date so I could in theory have two collections stacked so I can display the passed events collection in one way and the future events collection styled differently, but I can’t imagine it’s good practice to display multiple collections pulling through the same data on one page which makes me wonder whether there is a way to do conditional styling with JavaScript?

I imagine other people have wanted to achieve this sort of functionality so I didn’t know whether anyone had an guidance on how I should approach this? I’m really keen to include this feature to make the design more user friendly.

Thanks in advance!
Matt

Different users in different timezones would affect whether an event has passed so it is more complicated than it seems. I have built solutions on Webflow to address this where the users local time is considered and event time/dates are displayed correctly in the users timezone and then visually transformed when “over”.

Yes, it’s possible using script and custom CSS.

Here’s the basic approach I use;

#1 - MAKE THE TIMEFRAME AVAILABLE TO YOUR SCRIPT
In your Collection List item, drop an HTML Embed with the following content;

<data key="timeframe" from=" FROM DATETIME " to=" TO DATETIME "></data>

You’ll embed your from and to datetimes where I have the placeholders.

#2 - USE SCRIPT TO APPLY A CLASS
Write a bit of script will walk through collection list, look at those data items, and figure out if the event is past, present, or future. Apply a class accordingly, e.g.; time-past, time-present, or time-future. I’d have it append that class to the Collection List Item directly.

#3 - STYLE HOW YOU LIKE
On a draft Style-Guide page, create a mockup of your collection list item.
Apply all of the classes you have on your actual collection list item, and wrap it in a DIV which represent the Collection List Item itself. Make sure to carry over any classes you’ve applied there too.

Make 3 copies of this, and to each, define a different subclass;
time-past on one, time-present on another, and time-future on the third.
Change opacity, add borders, even do Interactions… whatever you want.

Remember that in the designer, you will NOT see the effect in the collection list, because the script that applies those classes won’t run in the designer, even in preview mode. You must publish e.g. to webflow.io and view it there to test your scripts are working.

Styling-wise though, you can see everything you need in your style guide page.

1 Like