How to Create a Calendar View in FlutterFlow

Create a Custom Widget CalendarView that imports the table_calendar package. Accept Component Parameters: events (List of Maps with 'date' DateTime and 'title' String), onDaySelected (callback with DateTime), initialFormat (String: 'month', 'twoWeeks', 'week'). Inside the widget, create a TableCalendar instance with firstDay set to one year ago, lastDay set to one year from now, and focusedDay set to today. Map the CalendarFormat enum based on initialFormat. Use a StatefulWidget to track focusedDay, selectedDay, and calendarFormat in local state.

1// Custom Widget: CalendarView
2import 'package:table_calendar/table_calendar.dart';
3
4class CalendarView extends StatefulWidget {
5  final List<Map<String, dynamic>> events;
6  final Function(DateTime) onDaySelected;
7  const CalendarView({
8    required this.events,
9    required this.onDaySelected,
10  });
11
12  @override
13  State<CalendarView> createState() => _CalendarViewState();
14}
15
16class _CalendarViewState extends State<CalendarView> {
17  CalendarFormat _format = CalendarFormat.month;
18  DateTime _focused = DateTime.now();
19  DateTime? _selected;
20
21  List<Map<String, dynamic>> _getEventsForDay(DateTime day) {
22    return widget.events.where((e) {
23      final d = e['date'] as DateTime;
24      return d.year == day.year &&
25          d.month == day.month &&
26          d.day == day.day;
27    }).toList();
28  }
29
30  @override
31  Widget build(BuildContext context) {
32    return TableCalendar(
33      firstDay: DateTime.now().subtract(Duration(days: 365)),
34      lastDay: DateTime.now().add(Duration(days: 365)),
35      focusedDay: _focused,
36      calendarFormat: _format,
37      selectedDayPredicate: (d) => isSameDay(_selected, d),
38      onDaySelected: (selected, focused) {
39        setState(() {
40          _selected = selected;
41          _focused = focused;
42        });
43        widget.onDaySelected(selected);
44      },
45      onFormatChanged: (f) => setState(() => _format = f),
46      onPageChanged: (f) => setState(() => _focused = f),
47      eventLoader: _getEventsForDay,
48    );
49  }
50}

Add CalendarStyle and HeaderStyle properties to the TableCalendar. Set todayDecoration to a CircleDecoration with FlutterFlowTheme primaryColor at 30% opacity. Set selectedDecoration to a CircleDecoration with solid primaryColor. Set markerDecoration (event dots) to small CircleDecoration with secondary color. For the header, set formatButtonDecoration with a rounded border, titleTextStyle with headlineSmall, and left/right arrow colors matching the theme. Set weekendTextStyle to use a muted color. Set outsideDaysVisible to false to keep the calendar clean. These styles ensure the calendar matches your app's design system.

On the page embedding the CalendarView Component, create a Backend Query on your events collection. Filter where date >= first day of current month AND date <= last day of current month. Pass the query results to the CalendarView Component Parameter events as a list of Maps. When the user navigates to a different month (onPageChanged callback), update the query date range. To minimize re-queries, load events for the current month plus one month before and after (three-month window). Store the loaded events in Page State and only re-query when the user navigates outside the loaded range.

The eventLoader property on TableCalendar returns events for each day. The calendar automatically renders marker dots below each day that has events. Customize the markers: use calendarBuilders.markerBuilder to create custom dot widgets. Show 1 dot for 1 event, 2 dots for 2 events, and 3 dots with a '+' for more than 3 events. Color-code dots by event category: blue for meetings, green for personal, red for deadlines. Create a Row of small Container circles (8x8 pixels) with the appropriate colors. Limit to 3 visible dots per day to keep the calendar clean.

When the user taps a calendar day, the onDaySelected callback fires. In FlutterFlow, connect this callback to show a Bottom Sheet DayEventsSheet Component. Pass the selected date and filtered events for that day as Component Parameters. Inside the Bottom Sheet, display: the date as a formatted heading Text, a ListView of events for that day (each showing: colored dot Container matching the event category, title Text, time Text, and a brief description). If no events exist for the tapped day, show an empty state with 'No events' Text and an 'Add Event' Button. Add a Today IconButton in the calendar header that resets focusedDay to DateTime.now().