Finsweet's CMS Filter tool is probably one of their most popular toolsets.
It allows you to dynamically filter CMS data using a Webflow-designed form as your filtering controls.
You can filter on;
Learn more:
https://finsweet.com/attributes/cms-filter
The label text itself is the filtered-matching content.
Button styling and a11y considerations can be handled well using Finsweet's cloneable or library, which has a11y filter elements.
Creating an "All" button;
https://forum.finsweet.com/t/how-can-i-add-and-style-an-all-button-for-cms-filter/123
https://forum.finsweet.com/t/cms-filter-number-ranges-with-select-field/2537
Your data can contain multiple individual dates and date ranges, and Finsweet seems to handle this collection of dates well.
Finsweet supports date-range filtering in the filter, so you can filter elements that are between a from and to date.
It also allows your filtered data to specify from and to dates, so that if the ranges overlap, it's considered a matched item.
Note however, that a date range in which the start and end date are the same will not work properly.
In complex filter setups, it may be desirable to progressively filter your UX so that your filtering options are themselves filtered.
For example, a single list of all of the cities of the world isn't very user friendly. Ideally, you'd progressively filter by continent, then country, and then see the cities just in that country.
To some extent, simple arrangements like this are possible with multiple filters.
Demo & cloneable;
https://webflow.com/made-in-webflow/website/progressive-finsweet-cms-filter
Range filtering has 3 possible scenarios;
Three possible types of ranges
Finsweet Filter currently [ 2023-07-14 ] appears to have a bug which prevents date range filtering in the N-1 scenario and likely N-N as well.
However 1-N seems fairly reliable?
Notes;
https://forum.finsweet.com/t/datepicker-cms-filter-date-format-in-french/1054
https://forum.finsweet.com/t/load-filter-with-scripts/771
https://forum.finsweet.com/t/using-load-more-with-filter/1591
https://forum.finsweet.com/t/cms-filter-api-restart-collection-of-filterable-props/689
https://forum.finsweet.com/t/using-load-more-with-filter/1591
https://forum.finsweet.com/t/trigger-script-when-using-cms-load/1601
Finsweet offers an API, which allows you to use client-side Javascript to further extend the capabilities of loading and filtering.
https://finsweet.com/attributes/api
https://finsweet.com/attributes/api/cms-filter
https://github.com/finsweet/attributes-examples/tree/master/src%2Fcms%2Fpopulate-external-data
https://github.com/finsweet/attributes-examples/tree/master/src%2Fcms%2Fpopulate-external-data
https://finsweet.com/attributes/api/cms-filter
https://www.npmjs.com/package/@finsweet/attributes-cmscore
https://finsweet.com/attributes/api/cms-load