How to Integrate a Calendar API for Event Management in FlutterFlow

1// functions/index.js — Generic Calendar API proxy
2// Install: cd functions && npm install axios googleapis
3const functions = require('firebase-functions');
4const admin = require('firebase-admin');
5const { google } = require('googleapis');
6
7admin.initializeApp();
8
9// Create OAuth2 client from stored credentials
10function getGoogleAuthClient() {
11  const cfg = functions.config().google_calendar;
12  const auth = new google.auth.OAuth2(
13    cfg.client_id,
14    cfg.client_secret,
15    cfg.redirect_uri
16  );
17  auth.setCredentials({
18    access_token: cfg.access_token,
19    refresh_token: cfg.refresh_token,
20  });
21  return auth;
22}
23
24exports.calendarProxy = functions.https.onRequest(async (req, res) => {
25  res.set('Access-Control-Allow-Origin', '*');
26  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
27
28  const { action, calendarId = 'primary', eventId, eventData, timeMin, timeMax } = req.body;
29  const auth = getGoogleAuthClient();
30  const calendar = google.calendar({ version: 'v3', auth });
31  const db = admin.firestore();
32
33  try {
34    let result;
35
36    if (action === 'listEvents') {
37      const response = await calendar.events.list({
38        calendarId,
39        timeMin: timeMin || new Date().toISOString(),
40        timeMax: timeMax || new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
41        maxResults: 100,
42        singleEvents: true,
43        orderBy: 'startTime',
44      });
45      // Normalize and cache events in Firestore
46      const events = (response.data.items || []).map((e) => ({
47        id: e.id,
48        title: e.summary || 'No title',
49        startDateTime: e.start.dateTime || e.start.date,
50        endDateTime: e.end.dateTime || e.end.date,
51        location: e.location || '',
52        description: e.description || '',
53        calendarId,
54      }));
55      // Write to Firestore for offline access
56      const batch = db.batch();
57      events.forEach((event) => {
58        batch.set(db.collection('calendar_events').doc(event.id), {
59          ...event,
60          cachedAt: admin.firestore.FieldValue.serverTimestamp(),
61        });
62      });
63      batch.set(db.collection('calendar_meta').doc('sync'), {
64        lastSyncedAt: admin.firestore.FieldValue.serverTimestamp(),
65      });
66      await batch.commit();
67      result = events;
68
69    } else if (action === 'createEvent') {
70      const response = await calendar.events.insert({
71        calendarId,
72        requestBody: {
73          summary: eventData.title,
74          description: eventData.description,
75          location: eventData.location,
76          start: { dateTime: eventData.startDateTime, timeZone: eventData.timeZone || 'UTC' },
77          end: { dateTime: eventData.endDateTime, timeZone: eventData.timeZone || 'UTC' },
78          attendees: eventData.attendees?.map((e) => ({ email: e })) || [],
79        },
80      });
81      const created = response.data;
82      // Add to Firestore immediately
83      await db.collection('calendar_events').doc(created.id).set({
84        id: created.id, title: created.summary,
85        startDateTime: created.start.dateTime,
86        endDateTime: created.end.dateTime,
87        location: created.location || '',
88        calendarId,
89        cachedAt: admin.firestore.FieldValue.serverTimestamp(),
90      });
91      result = created;
92
93    } else if (action === 'deleteEvent') {
94      await calendar.events.delete({ calendarId, eventId });
95      await db.collection('calendar_events').doc(eventId).delete();
96      result = { success: true };
97    }
98
99    res.json({ success: true, data: result });
100  } catch (err) {
101    console.error('Calendar CF error:', err.message);
102    res.status(500).json({ success: false, error: err.message });
103  }
104});

1// Custom Widget: CalendarView
2// Pubspec: table_calendar: ^3.1.0
3// Parameters:
4//   events: List<dynamic> (JSON event objects)
5//   selectedDay: DateTime
6
7import 'package:flutter/material.dart';
8import 'package:table_calendar/table_calendar.dart';
9
10class CalendarViewWidget extends StatefulWidget {
11  final List<dynamic> events;
12  final DateTime selectedDay;
13  final Future Function(DateTime) onDaySelected;
14
15  const CalendarViewWidget({
16    required this.events,
17    required this.selectedDay,
18    required this.onDaySelected,
19    Key? key,
20  }) : super(key: key);
21
22  @override
23  State<CalendarViewWidget> createState() => _CalendarViewWidgetState();
24}
25
26class _CalendarViewWidgetState extends State<CalendarViewWidget> {
27  late DateTime _focusedDay;
28  late DateTime _selectedDay;
29
30  @override
31  void initState() {
32    super.initState();
33    _focusedDay = widget.selectedDay;
34    _selectedDay = widget.selectedDay;
35  }
36
37  // Get events for a specific day
38  List<dynamic> _getEventsForDay(DateTime day) {
39    return widget.events.where((event) {
40      try {
41        final start = DateTime.parse(event['startDateTime'] as String);
42        return start.year == day.year &&
43               start.month == day.month &&
44               start.day == day.day;
45      } catch (_) { return false; }
46    }).toList();
47  }
48
49  @override
50  Widget build(BuildContext context) {
51    return TableCalendar(
52      firstDay: DateTime.now().subtract(const Duration(days: 365)),
53      lastDay: DateTime.now().add(const Duration(days: 365)),
54      focusedDay: _focusedDay,
55      selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
56      eventLoader: _getEventsForDay,
57      calendarStyle: const CalendarStyle(
58        markerDecoration: BoxDecoration(
59          color: Color(0xFF1E88E5),
60          shape: BoxShape.circle,
61        ),
62        selectedDecoration: BoxDecoration(
63          color: Color(0xFF1E88E5),
64          shape: BoxShape.circle,
65        ),
66        todayDecoration: BoxDecoration(
67          color: Color(0xFF90CAF9),
68          shape: BoxShape.circle,
69        ),
70      ),
71      onDaySelected: (selected, focused) {
72        setState(() {
73          _selectedDay = selected;
74          _focusedDay = focused;
75        });
76        widget.onDaySelected(selected);
77      },
78    );
79  }
80}