Display Events on the Calendar and Filter by Selected Date

Scenario: Imagine you have an app where users can view events and appointments, and you want to allow them to select a date on the calendar to see the events that are happening on that day. When a date is selected, the events should automatically be filtered and displayed in a list on the same page.

Steps to implement

Set up the Calendar

1

Create your layout and insert the custom calendar on the page

On the FlutterFlow page where you want to display the calendar, add the calendar component.

2

Make the query accessible

To avoid making unnecessary multiple queries, it is recommended to place the main query at the top of the layout. This way, all widgets that need to use the information from that query will have access to it. Some users may choose to wrap the calendar inside a container and make the query within that container. However, this is not recommended because no other element on the page will be able to access that query. As a result, you would be forced to create a second query if you want to display a filtered list of events based on the selected date from the calendar

3

Pass a list of datetimes to the calendar

Use the eventsDates parameter to pass a list of event dates. This list should come from the query in the main container of your page, and the source of that query can be any data management system, such as Supabase, Firestore, or others. If you cannot directly access the list of DateTime objects (for instance, if the dates are stored within a list of Firestore documents or Supabase rows), you can use FlutterFlow’s built-in option to map the field containing the DateTime for each item in the query. This will extract the DateTime field from each item in the query results, and you can pass the resulting list of DateTime objects to the calendar.

Filter events

1

Create a Dynamic Widget to Access the Event List

Start by creating a widget such as a ListView, Wrap, Column, or PageView, which will generate child elements dynamically. This widget will access the same list of events obtained in the previous query.

2

Apply a Date Filter Based on the Calendar Selection

Use a filter where the field containing the event’s date (formatted as "d/m/y") is compared with the selected date from the calendar, which is stored as pageState > CustomCalendar > selectedDate (formattedd as "d/m/y").

Important: It’s crucial to format both the event date and the selected calendar date to "d/m/y" because the time part (00:00) in the calendar’s selected date might not match the time in the event data. Without this formatting, only events with a time of 00:00 would match. By formatting both the event date and the selected date to "d/m/y," you ensure that the comparison is based only on the date, ignoring the time.

3

Apply Style to Filtered Events

With the filter applied to show only the events corresponding to the selected date from the calendar, you can now proceed to style the filtered event list as desired. You can customize the appearance, layout, and behavior of the list to fit your design preferences.