I have workouts planned on specific dates and I want to show the planned workout when a user selects a day in the calendar.
I can display the calendar correctly and I have a list of workouts, but I can’t figure out how to connect the two. I don’t see any clear option to filter or link the workout list based on the date selected in the calendar.
What I want:
User selects a date in the agenda/calendar
The workout(s) planned for that specific date are shown below
If you’d like workouts to be filtered based on a specific date clicked on the calendar, you can activate the (Agenda View) mode on the built-in Calendar component.
If you prefer a more practical and customized way, especially if you’d like to display workouts on another list as shown in your screenshot, you can either:
Replace the calendar by a (Date picket) component, where you can filter the list based on it.
Or use the (Advanced Calendar) component from the Marketplace, were it has more features and is more practical for filtering and logic.
Tag me for a cloneable calendar + filtered workouts example.
You’re very welcome! Sure, please let me know what approach from the ones I’ve mentioned previously you prefer, and I’d be happy to share an example of it with you for sure.
Add the Advanced Calendar component in the screen above the list.
Select the (Workouts) collection in the Calendar, and connect the Start time (Workout Time), and End time (if available) to your database collection properties.
Add the following filters to the list of (Workouts) below:
Filter 1: Workout Time is after (Start of day selected on the Advanced Calendar).
AND, Filter 2: Workout Time is before (End of day selected on the Advanced Calendar).
Note: Make sure to have the (Workout time) property in the database as a date/time property.
It jumps back to the default after selecting several dates.
So when clicking through the calendar it suddenly jumps back when you select an other date.
I also see that it shows dots beneath dates that have no workout.
Is it possible please to share a preview link, so I can check it directly? This way we can see if the behavior is from the flow or the component itself.
Thank you @Roelt for sharing the preview link. I tested it and it’s changing the date automatically after each click. This component didn’t have this issue before. Let’s try one thing, please remove the section (default date) from the calendar’s parameters and let me know if it still occurs.
You’re welcome! I recommend contacting the developer of the component in case it’s an issue with the component itself. You can find their contact info at the bottom of the component’s parameters.
