--- title: "Easily Bind Supabase with Flutter Calendar and Perform CRUD Actions" published_at: "2024-08-27T10:00:00+00:00" modified_at: "2026-01-14T07:32:44+00:00" url: "https://www.syncfusion.com/blogs/post/bind-supabase-in-flutter-calendar" excerpt: "This blog explains how to bind Supabase with the Syncfusion Flutter Calendar and perform CRUD actions for effective appointment management." taxonomy_category: - "Calendar" - "Desktop" - "Development" - "Flutter" - "Mobile" - "Supabase" - "Web" taxonomy_post_tag: - "Calendar" - "Cross-Platform" - "desktop" - "Flutter" - "Mobile" - "supabase" - "Web" --- # Easily Bind Supabase with Flutter Calendar and Perform CRUD Actions [Yuvaraj Gajaraj](https://www.syncfusion.com/blogs/author/yuvaraj-gajaraj) ![Easily Bind Supabase with Flutter Calendar and Perform CRUD Actions](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Easily-Bind-Supabase-with-Flutter-Calendar-and-Perform-CRUD-Actions.jpeg) **TL;DR:** Let’s see how to integrate Supabase with Syncfusion Flutter Calendar to manage appointments. This guide covers setting up dependencies, initializing Supabase, fetching data, and performing CRUD operations. Using these tools, you’ll also learn how to handle real-time updates and load appointments on demand. Syncfusion [Flutter Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) has rich features for scheduling, managing, and efficiently representing appointments. This widget exposes a clean and convenient user interface for custom working days and hours and basic calendar operations such as date navigation and selection. Let’s see how to integrate the [Supabase](https://en.wikipedia.org/wiki/Superbase_(database)) database with the Flutter Calendar, fetch appointments, and display them in it. We’ll also see how to perform CRUD actions (Add, update, and delete) on the appointments. **Note:** Before proceeding, refer to the [getting started with the Flutter Calendar documentation](https://help.syncfusion.com/flutter/calendar/getting-started) . ## Adding dependencies Add the **Supabase_flutter** and ** Syncfusion_flutter_calendar** dependencies in your ** pubspec.yaml** file with the latest version. ``` dependencies: syncfusion_flutter_calendar: *.*.* supabase_flutter: *.*.* ``` ## Initializing the Supabase in a Flutter app Initialize the [Supabase](https://pub.dev/documentation/supabase_flutter/latest/supabase_flutter/Supabase-class.html) database in your Flutter app using the **initialize** function, and provide the URL and [anonKey](https://supabase.com/docs/guides/api/api-keys#the-anon-key) to access the database. ``` Future<> main() async { WidgetsFlutterBinding.ensureInitialized(); await Supabase.initialize( url: 'YOUR_SUPABASE_URL', anonKey: 'YOUR_SUPABASE_ANON_KEY', ); runApp(MyApp()); } ``` Replace **YOUR_SUPABASE_URL** and ** YOUR_SUPABASE_ANON_KEY** values with your Supabase URL and anonymous key, respectively. ## Retrieve data from Supabase and bind it in the Flutter Calendar Create a [Supabase](https://pub.dev/documentation/supabase_flutter/latest/supabase_flutter/Supabase-class.html) client instance and access its data by providing the respective table name and the **primaryKey**. Then, store the data in a ** future** variable. Next, create the [SfCalendar](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar-class.html) widget and wrap it with a [StreamBuilder](https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html) . Assign the **future** variable to the ** stream** property of the ** StreamBuilder.** Finally, create a **Meeting** class to define meeting details and a factory constructor to convert JSON data into real values. This will update the calendar to display real-time data. ``` final Stream<>>>>> _future = supabase.from('table_name').stream(primaryKey: ['primary_Key']); @override Widget build(BuildContext context) { return Scaffold( body: StreamBuilder<>>>>>( stream: _future, builder: (context, snapshot) { if (!snapshot.hasData) { return const Center(child: CircularProgressIndicator()); } final countries = snapshot.data!; _events = DataSource( countries.map((e) =>> Meeting.fromSnapShot(e, Colors.blue)).toList(), ); return SfCalendar( view: CalendarView.month, controller: _controller, dataSource: DataSource( countries .map((e) =>> Meeting.fromSnapShot(e, Colors.blue)) .toList(), ), onTap: onCalendarTapped, monthViewSettings: const MonthViewSettings( appointmentDisplayMode: MonthAppointmentDisplayMode.appointment, ), ); }, ), ); } ``` ## Add an appointment using the appointment editor To add an appointment to the Flutter Calendar, use the [onTap](https://help.syncfusion.com/flutter/calendar/callbacks#calendar-tap-callback) event to open an appointment editor and enter the required information. Then, access the **Supabase** instance and use the ** insert** function to add the data to the table. ``` await _client.from(table_name').insert( [ { 'startTime': appointment.from.toIso8601String(), 'endTime': appointment.to.toIso8601String(), 'color': appointment.background.toString(), 'eventName': appointment.eventName, } ], ); ``` ## Update an existing appointment To update an appointment in the Flutter Calendar, get the tapped appointment information from the calendar’s [onTap](https://help.syncfusion.com/flutter/calendar/callbacks#calendar-tap-callback) event. Then, compare its fields (e.g., id) using the **eq()** function and update the specific fields with the ** update()** function. ``` await _client.from(table_name').update( { 'startTime': appointment.from.toIso8601String(), 'endTime': appointment.to.toIso8601String(), 'color': appointment.background.toString(), 'eventName': appointment.eventName, } ).eq('id’: appointment.id); ``` ## Delete an appointment To delete an appointment in the Flutter Calendar, retrieve the appointment information from the **onTap** event. Then, check whether the ID field matches and then call the ** delete()** function in the ** Supabase** instance. This action will remove the data from the ** Supabase** database and update the ** SfCalendar** through the ** StreamBuilder.** ``` await _client .from('appointment_editor') .delete() .eq('number', appointment.id); ``` ## Load appointments on-demand In the **SfCalendar,** we have a [load more](https://help.syncfusion.com/flutter/calendar/load-more) feature that helps us load appointments on-demand. This feature allows us to retrieve appointments from the Supabase database and load them into **SfCalendar** when the view changes, such as when swiping or tapping the navigation arrow button. Refer to the following code example to load appointments on demand from the Supabase database to the Flutter Calendar. ``` @override Future<> handleLoadMore(DateTime startDate, DateTime endDate) async { List<<_Meeting>> meetings = <<_Meeting>>[]; DateTime date = DateTime(startDate.year, startDate.month, startDate.day); DateTime appEndDate = DateTime(endDate.year, endDate.month, endDate.day, 23, 59, 59); await Future<>.delayed(const Duration(seconds: 1)); while (date.isBefore(appEndDate)) { final List<<_Meeting>>? data = responseData.map((e) =>> Meeting.fromSnapShot(e, Colors.blue)).toList(); if (data == null) { date = date.add(const Duration(days: 1)); continue; } for (final _Meeting meeting in data) { if (appointments.contains(meeting)) { continue; } meetings.add(meeting); } date = date.add(const Duration(days: 1)); } appointments.addAll(meetings); notifyListeners(CalendarDataSourceAction.add, appointments); } ``` Refer to the following output image. ![Binding Supabase with Flutter Calendar and performing CRUD actions](https://www.syncfusion.com/blogs/wp-content/uploads/2024/08/Build-Dynamic-Calendar-Apps-with-Supabase-and-Flutter.gif) Binding Supabase with Flutter Calendar and performing CRUD actions ## GitHub reference For more details, refer to the [Binding Flutter Calendar with Supabase and performing CRUD actions GitHub demo](https://github.com/SyncfusionExamples/flutter_calendar_supabase) . ## Conclusion Thanks for reading! In this blog, we’ve seen how to integrate the Supabase database with the Syncfusion[Flutter Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) widget and perform CRUD actions to manage appointments efficiently. Try out the steps in this blog and leave your feedback in the comments section below! For our customers, the latest version of Essential Studio® is available from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you’re not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads) to evaluate our components. If you have any questions, contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) . As always, we are here to assist you! ## Related blogs - [How to add a scrollbar to Syncfusion Flutter Charts](https://www.syncfusion.com/blogs/post/adding-scrollbar-in-flutter-charts) - [3 Easy Steps to Digitally Sign PDFs in Your Flutter App](https://www.syncfusion.com/blogs/post/digitally-sign-pdf-flutter-pdf-viewer) - [Easily Synchronize Multiple Charts in Your Flutter App Like a Pro](https://www.syncfusion.com/blogs/post/synchronize-multiple-flutter-charts) - [Introducing the New ROC and WMA Indicators in Flutter Charts](https://www.syncfusion.com/blogs/post/roc-and-wma-indicators-flutter-charts)