Filter calendar events with multiple criteria

Hello,
Here’s a newbie question: I’m trying to figure out how to filter the type of events in a calendar based on multiple criteria.
I have a thing called Events that I use as data source in the calendar.
Each Event has a “Type” field which I want to use to select relevant Events to display. Right now, this field has 4 possible entries – type1, type2, type3, type4.
My first instinct was to create checkboxes above the calendar for each Type. I found several ways to change the data in the calendar based on which checkbox is checked. But now I’m stuck on how to proceed when more than one box is checked.
The user must be able to check 1, 2, 3 or 4 boxes at will.
If all boxes are checked, I want to see all my Event entries. If only two boxes are checked, I want only the events with the two corresponding types.
I’m trying to tell the calendar something like:

  • Check which of my 4 boxes are checked
  • Then filter my Event list only with the corresponding checked types
    It crossed my mind that I could set all 16 possible box combinations in the conditional tab of the calendar but, of course, it doesn’t seem very clever – especially if I want to add more types in the future.
    I’ve tried in vain several complex expressions in the data source, the conditional tab – even looked for a workflow. But nothing worked: I can’t seem to grasp the right “bubble way” to do a sort of if/else condition. Something like:
  • Search for my Events
  • If type1 isn’t checked, remove type1 events from the list, else ignore
  • If type2 isn’t checked, remove type2 events from the list, else ignore
  • If type3 isn’t checked, remove type3 events from the list, else ignore
  • If type4 isn’t checked, remove type4 events from the list, else ignore
    I don’t know where the problem lies: whether I suck at using expressions , or whether it’s the logic of my approach that’s wrong?
    I tried with multiple contraints, successive “:filtered”, merging and intersecting… All my expressions where either wrong (red) or, in the end, loading no event or only one type of event in the calendar…
    Could somebody hint toward a solution?
    Thanks :blush:!
1 Like

Hello, this video below uses dropdowns to filter a repeating group however i believe it would be the same principle to get checkboxes to work with the calendar view. Maybe even simpler because it is just a yes/no. hope it helps…

How To Create A Multi Layer Filter In Your App - Bubble.io Tutorial

1 Like

Thanks a lot !!
I have a very good feeling about that : custom states and custom events really look like the notions I didn’t know I desperately needed… And this video explains them quite clearly. I’ll work with that and let you know if I’m ok :smiley:

yea for sure a much better solution to filtering. last year i needed something like this and did it the first way that came to mind by making 20 different workflows for all available combinations lol. I will also be switching over to this method soon. i tested it and works great. glad it helped. :+1:

:+1: :+1: :+1:
Again, thanks a lot: it works perfectly !! A simple workflow under each checkbox. It took me a little time to understand how to populate my custom state at the start of the custom event, but now I think I get it and it opens new horizons for my small app :slight_smile: I mean, I was a bit sceptical about “no-code” platforms at first, but now I’m falling in love with bubble…

2 Likes

Thank you! Your instructions came in handy.

One question remains. How much data (list size) can be stored through a custom state?

For example, if the base list is 10,000 items. Will this entire list be loaded into the user’s browser?

typically for my calendars I do not load the entire list of events for speed. After about 200-300 entries i noticed a large impact on performance. Instead now i have conditions to only show events within the current selected date range. For example every month. and when the user changes month, it reloads the events. @kovtun