How to Build a Booking System with Calendar Integration in FlutterFlow

In Firestore, create a services collection with fields: name (String), durationMinutes (Integer — 30, 60, or 90), price (Double), providerId (String — the staff member), and description (String). Create a bookings collection with fields: serviceId (String), userId (String), providerId (String), startTime (Timestamp), endTime (Timestamp), status (String — confirmed, cancelled), and createdAt (Timestamp). Add 2-3 test services. Set Firestore rules: users can read services, authenticated users can create bookings, and users can only read/cancel their own bookings.

Create a Custom Widget named BookingCalendar that imports the table_calendar package. The widget accepts parameters: providerId (String) and an Action Parameter callback onDateSelected (DateTime). Inside the widget, query bookings for the selected month and providerId. For each day, calculate availability: green if zero bookings for that day, yellow if some slots remain, red if all slots are booked (compare booking count against total available slots based on working hours and service duration). Use TableCalendar's calendarBuilders.defaultBuilder to return a Container with circular background in the appropriate color. On day tap, call the onDateSelected callback passing the tapped date.

1// Custom Widget: BookingCalendar
2import 'package:table_calendar/table_calendar.dart';
3
4TableCalendar(
5  firstDay: DateTime.now(),
6  lastDay: DateTime.now().add(Duration(days: 90)),
7  focusedDay: _focusedDay,
8  selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
9  onDaySelected: (selected, focused) {
10    setState(() { _selectedDay = selected; _focusedDay = focused; });
11    widget.onDateSelected?.call(selected);
12  },
13  calendarBuilders: CalendarBuilders(
14    defaultBuilder: (context, day, focused) {
15      final color = _getAvailabilityColor(day);
16      return Container(
17        margin: const EdgeInsets.all(4),
18        decoration: BoxDecoration(color: color, shape: BoxShape.circle),
19        alignment: Alignment.center,
20        child: Text('${day.day}'),
21      );
22    },
23  ),
24)

Below the calendar, add a GridView that shows available time slots for the selected date. Create a Custom Function generateTimeSlots that takes the provider's startHour, endHour, and service durationMinutes, then generates all possible slot start times (e.g., 9:00, 9:30, 10:00... for 30-min slots). Run a Backend Query on bookings for the selected providerId and date to get already-booked startTimes. For each generated slot, compare against booked times: if booked, render a grey disabled Container with strikethrough text; if available, render a tappable blue Container. Bind the On Tap of available slots to a Page State selectedSlot (Timestamp). Each slot Container shows the formatted time (e.g., '10:30 AM').

Add a Confirm Booking button below the time slot grid. On Tap, trigger a Custom Action that runs a Firestore transaction: inside the transaction, query bookings where providerId == selected provider AND startTime == selectedSlot. If any booking exists (another user booked it in the meantime), abort and show a SnackBar 'This slot was just booked. Please choose another.' If no conflict, create the booking document with serviceId, userId (currentUser.uid), providerId, startTime (selectedSlot), endTime (selectedSlot + durationMinutes), status: confirmed, and createdAt: now. The transaction ensures atomicity — if two users tap Book at the same millisecond, only one succeeds.

1// Custom Action: bookSlotWithTransaction
2final firestore = FirebaseFirestore.instance;
3await firestore.runTransaction((transaction) async {
4  final conflict = await firestore
5    .collection('bookings')
6    .where('providerId', isEqualTo: providerId)
7    .where('startTime', isEqualTo: selectedSlot)
8    .where('status', isEqualTo: 'confirmed')
9    .get();
10  if (conflict.docs.isNotEmpty) {
11    throw Exception('Slot already booked');
12  }
13  transaction.set(firestore.collection('bookings').doc(), {
14    'serviceId': serviceId,
15    'userId': currentUser.uid,
16    'providerId': providerId,
17    'startTime': selectedSlot,
18    'endTime': Timestamp.fromDate(
19      selectedSlot.toDate().add(Duration(minutes: duration))),
20    'status': 'confirmed',
21    'createdAt': FieldValue.serverTimestamp(),
22  });
23});

Deploy a Cloud Function triggered by Firestore onCreate on the bookings collection. The function reads the booking data, fetches the user's email and the service name, then sends a confirmation email using SendGrid or Firebase Extensions Trigger Email. The email includes the service name, provider, date, time, and a cancellation link. In FlutterFlow, after the transaction succeeds, navigate to a BookingConfirmationPage that queries the newly created booking document and displays: service name, provider name, date and time formatted, and a Cancel Booking button. The cancel button updates the booking status to cancelled and shows a confirmation SnackBar.