CMS List Filter: calendar filtering only start/end dates, not the days in between

Attributes
,
1

Description

I’m building an event calendar for ca 2000 events. I already have functional filters for category, city, sorting and search but have trouble with the date filter.

Site URL

Check the temporary site: Site URL

Steps to Reproduce

For testing, I’ve set all the events start on 1 Oct and end on 3 Oct.

  1. Click a date: 1 Oct and 3 Oct all the events are visible.
  2. Click a date: 2 Oct all the events are hidden.

Expected Behavior

For this site, I’ve designed a filter that shows events only from one chosen day at the time. Events should be visible if they

  • happen on that chosen day (one-day events)
  • start/end on that chosen day
  • the chosen day is between the event’s start/end day

Actual Behavior

When you pick a date from the calendar, the filter shows only the events that start and/or end on that chosen day. Filter won’t show events that are happening on that chosen day if they start earlier and end later.

Video

Watch: Loom recording link

Loom recording doesn’t show the calendar view when clicked but you can see it on live website.

Structure

  1. Date picker (Custom Element)
    class=“date” | type=“date” | fs-list-field=“start, end”
  2. Event card: visible date view (black text) that takes all the values from CMS
  3. Event card: div for hidden dates (now visible, grey text)
    class=“start” | fs-list-field=“start” | data-start=“{{ Start Date/Time }}”
    class=“end” | fs-list-field=“end” | data-end=“{{ End Date/Time }}”

I’ve tried to solve this for days in a million ways but not able to make it work. All the help is 110% appreciated :folded_hands:

2

Hey @bea.brunfeldt!

The challenge is that when you use fs-list-field="start, end" on your date picker, it’s trying to filter against both dates simultaneously but can only match exact dates, not check if a selected date falls within a range.

For your event calendar, we’d suggest separate Start and End input fields with the fs-list-operator="greater-equal" and fs-list-operator="less-equal" and fs-list-fieldtype = date on both inputs.

Could you please give this a try and let us know how it goes?

@Support-Luis and @Support-Pedro can help if you face any issues!

3

Hi @Support-Finn,

Thanks for getting back to me. Based on your thoughts, I’ve tried everything I can think of but nothing works.

  • I already have separate Start and End fields inside the event card (I can’t add them on the form since I’m not giving an option to select a date range).
  • Removing fs-list-field="start, end" removes the connection between form field (datepicker) and event start/end dates so I guess those have to stay?
  • Adding attributes fs-list-fieldtype=”date” to both and fs-list-operator="greater-equal/less-equal" didn’t affect at all but I left them in place.
  • I also tried replacing text block fields with Webflow’s Input and Custom Element fields but figured those are not suitable for date fields.

@Support-Luis @Support-Pedro Could you please take a look at this, maybe test if you can make it work and let me know how? I’d really appreciate the help :folded_hands:

4

Hey @bea.brunfeldt! Could you please share a read-only link? I’ll take a look!

5

Hi @Support-Luis,

Thanks, great to hear! :folded_hands: Here’s the read-only link:

6

heya @bea.brunfeldt :waving_hand:

adding fs-list-operator="greater-equal" to the date input field solved what you’re asking when i applied it to your page at https://untitled-10.webflow.io/

7

Hi @spencer.cappiello :waving_hand:

I was already excited that the problem was solved when the filter showed events also on 2 Oct but soon I realized the filter showed all the events also on 30 Sep (when those events haven’t even started) :woman_facepalming:

I also tried adding fs-list-operator="greater-equal, less-equal" attribute to the date input field but as expected, it left out the 2 Oct events.

So I’m still looking for a solution. Thanks so much for your effort though and let me know if you figure out a way to solve this :folded_hands:

8

:waving_hand: @Support-Luis have you had time to take a look at this? :folded_hands:

Here’s the read-only link

9

Hey @bea.brunfeldt!

Yes, I have been taking a look at the current setup, and I am afraid it needs some rework.

The list operator attribute (fs-list-operator) should be used in the filter form inputs, not on the field element within the card.

To filter for a date range, you’ll need 2 inputs on the filter form, one for the start date and one for the end date. Both with the appropriate fs-list-operator value and the fs-list-field = date attribute.

For your item elements, the date field should only have the fs-list-field = date and fs-list-fieldtype = date. This setup should be able to filter the items, if not, then we can use the strat and end field names

I’ve also sent you a DM, could you please check your inbox? :folded_hands: