Using `Upcoming` and `Past` checkboxes to filter event items based on date

I’m attempting to use Finsweet Attributes CMS filtering to filter events based on two checkboxes: Upcoming and Past. I have access to dates in the collection, and I have written a script to surface the current date and place it in a DOM element so I have a reference point for where the user is in time. As I understand it, the range filter only works with strings, so I would have to stringify all of the dates and could use that to show the events in the string range between a far-past date (ex: 01011994) and today’s date (ex: 06022023), and if I wanted to show any upcoming events, I could set the range for today and a far-future date (ex: 12312050).

  1. Is there an easier way to do this that I’m missing?
  2. Is there a way to have more than one range filter in a particular instance of the CMS Filter form element?

:beers: Cheers!

hey @travis!

  1. Custom code would be the best bet to also avoid restructuring your CMS Collection. It seems you’ve pretty much got it working right?

  2. You should be able to add as many range sliders as you need by following the structure below and using different identifiers for the CMS Filter setup.

For anybody who reads this, and needs to solve for upcoming/past, the solution is actually quite simple and I was overthinking it. All you need to do is surface the relevant date in each collection item in a readable date format (ex: 2023-06-05) then write some Javascript to determine the current date, loop through each item in the collection to read the date for each. If the date is before the current date, write “Past” to a sibling element with a particular class name (referenced by Past filter), and if the date is in the future, write “Upcoming” to a sibling element with a class name (referenced by Upcoming filter). Now you’re not relying on CMS Filtering attributes to ingest the dates and do anything with it, rather it’s just checking each text block for matching values to “Upcoming” or “Past”. Obviously if you need to get more granular with a date range for particular outputs, you should probably use the range slider with a date attribute, but this works well if you’re just measuring by past or future.

1 Like