How to Create a Dynamic Event Calendar with User Content in FlutterFlow

Create a Firestore events collection with fields: title (String), description (String), date (Timestamp), startTime (String), endTime (String), location (String), createdBy (String, userId), category (String), attendeeCount (Integer, default 0), imageUrl (String), isApproved (Boolean, default false), and status (String: 'pending', 'approved', 'rejected'). Under each event, create an attendees subcollection with documents keyed by userId containing rsvpAt (Timestamp). The isApproved flag ensures only admin-vetted events appear on the public calendar.

Add table_calendar: ^3.0.0 to Pubspec Dependencies. Create a Custom Widget called EventCalendar that accepts a Component Parameter eventDates (List of DateTime) and an Action Parameter callback onDaySelected(DateTime). In the build method, return a TableCalendar with firstDay set to 2 years ago, lastDay to 2 years from now, and focusedDay to today. Implement the eventLoader callback: for each day, count how many dates in eventDates match that day and return a list of that length. The calendar renders a dot per event on each day. On day tap, call widget.onDaySelected with the tapped date.

1// Custom Widget: EventCalendar
2import 'package:flutter/material.dart';
3import 'package:table_calendar/table_calendar.dart';
4
5class EventCalendarWidget extends StatefulWidget {
6  final double width;
7  final double height;
8  final List<DateTime> eventDates;
9  final Future Function(DateTime selectedDay)? onDaySelected;
10
11  const EventCalendarWidget({
12    Key? key,
13    required this.width,
14    required this.height,
15    required this.eventDates,
16    this.onDaySelected,
17  }) : super(key: key);
18
19  @override
20  State<EventCalendarWidget> createState() => _EventCalendarWidgetState();
21}
22
23class _EventCalendarWidgetState extends State<EventCalendarWidget> {
24  DateTime _focusedDay = DateTime.now();
25  DateTime? _selectedDay;
26
27  @override
28  Widget build(BuildContext context) {
29    return SizedBox(
30      width: widget.width,
31      height: widget.height,
32      child: TableCalendar(
33        firstDay: DateTime.now().subtract(const Duration(days: 730)),
34        lastDay: DateTime.now().add(const Duration(days: 730)),
35        focusedDay: _focusedDay,
36        selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
37        eventLoader: (day) {
38          return widget.eventDates
39              .where((d) => isSameDay(d, day))
40              .toList();
41        },
42        onDaySelected: (selected, focused) {
43          setState(() {
44            _selectedDay = selected;
45            _focusedDay = focused;
46          });
47          widget.onDaySelected?.call(selected);
48        },
49        calendarStyle: const CalendarStyle(
50          markerDecoration: BoxDecoration(
51            color: Colors.blue,
52            shape: BoxShape.circle,
53          ),
54          todayDecoration: BoxDecoration(
55            color: Colors.blueAccent,
56            shape: BoxShape.circle,
57          ),
58          selectedDecoration: BoxDecoration(
59            color: Colors.deepPurple,
60            shape: BoxShape.circle,
61          ),
62        ),
63      ),
64    );
65  }
66}

When onDaySelected fires, store the selected date in Page State selectedDate. Below the calendar, add a ListView with a Backend Query filtering events where date falls within the selected day (startOfDay <= date < endOfDay) AND isApproved == true. Each event card shows the title, time, location, category badge, attendeeCount, and an RSVP button. The RSVP button checks if the current user exists in the event's attendees subcollection. If not, tapping creates an attendee document and increments attendeeCount atomically. If already RSVPed, show 'Going' with an option to cancel.

Create a CreateEvent page with a form containing: title TextField, description TextField (multiline), DateTimePicker for the event date, start and end time TextFields, location TextField, category DropDown (from an Option Set), and an optional FlutterFlowUploadButton for an event image. On submit, create an event document with status set to 'pending' and isApproved set to false. Show a SnackBar confirming the submission is pending review. Create an AdminEvents page showing a ListView of pending events with Approve and Reject buttons that update the status and isApproved fields.

Instead of loading all events at once, query only the visible month's events. On the calendar Custom Widget, add an onPageChanged callback parameter that fires when the user swipes to a new month, returning the new focused month. In FlutterFlow, when onPageChanged fires, update Page State currentMonth and re-run the Backend Query with filters: date >= firstDayOfMonth AND date <= lastDayOfMonth AND isApproved == true. Pass the resulting dates list to the calendar widget's eventDates parameter. This keeps reads proportional to events per month, not total events.

On the event detail view, add a Share IconButton. Create a Custom Action using the share_plus package that composes a share message: 'Check out {title} on {date} at {location}! RSVP here: {deepLinkUrl}'. Call Share.share(message) to open the native share sheet. For the deep link, use a URL that opens your app's event detail page (e.g., yourapp.com/event/{eventId}). This drives organic discovery of your community calendar.