We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to work with the Firebase database and the Flutter event calendar (SfCalendar) for appointments

Platform: Flutter |
Control: SfCalendar |
Published Date: November 11, 2020 |
Last Revised Date: February 8, 2021

In the Flutter event calendar, you can add the appointment data to FireBase database from button tapped callback of the Flutter and fetch the values from the database assign it to the Flutter calendar events.

STEP 1: Add the required packages in Pubspec.yaml.

syncfusion_flutter_calendar: 18.2.54  
firebase_core: "^0.5.0"
cloud_firestore: ^0.14.0+1
firebase_database: 4.0.0

 STEP 2: Create a database in Firebase and store the appointment data in the database. Please refer the following link to create database and store the data.




STEP 3: Add a method for fetching data from the created database.

getDataFromDatabase() async {
  var value= FirebaseDatabase.instance.reference();
  var getValue=await value.child('CalendarData').once();
  return getValue;

STEP 4: Call this method in initState() and based on the results value update the appointment value.

void initState() {
  getDataFromDatabase().then((results) {
    setState(() {
      if(results !=null) {
        querySnapshot = results;

STEP 5: Fetching the appointments from the database.

Widget build(BuildContext context) {
  return Scaffold(
    body: _showCalendar(),
_showCalendar() {
  if (querySnapshot != null) {
    List<Meeting> collection;
    var showData = querySnapshot.value;
    Map<dynamic, dynamic> values = showData;
    List<dynamic> key = values.keys.toList();
    if (values != null) {
      for (int i = 0; i < key.length; i++) {
        data = values[key[i]];
        collection ??= <Meeting>[];
        final Random random = new Random();
            eventName: data['Subject'],
            isAllDay: false,
            from: DateFormat('dd/MM/yyyy HH:mm:ss').parse(data['StartTime']),
            to: DateFormat('dd/MM/yyyy HH:mm:ss').parse(data['EndTime']),
            background: _colorCollection[random.nextInt(9)]));
    } else {
      return Center(
        child: CircularProgressIndicator(),
    return SafeArea(
        child: Column(
          children: [
              height: 400,
              child: SfCalendar(
                view: CalendarView.month,
                initialDisplayDate: DateTime(2020, 4, 5, 9, 0, 0),
                dataSource: _getCalendarDataSource(collection),
                monthViewSettings: MonthViewSettings(showAgenda: true),
void _initializeEventColor() {
  this._colorCollection = new List<Color>();
  _colorCollection.add(const Color(0xFF0F8644));
  _colorCollection.add(const Color(0xFF8B1FA9));
  _colorCollection.add(const Color(0xFFD20100));
  _colorCollection.add(const Color(0xFFFC571D));
  _colorCollection.add(const Color(0xFF36B37B));
  _colorCollection.add(const Color(0xFF01A1EF));
  _colorCollection.add(const Color(0xFF3D4FB5));
  _colorCollection.add(const Color(0xFFE47C73));
  _colorCollection.add(const Color(0xFF636363));
  _colorCollection.add(const Color(0xFF0A8043));

STEP 6: Use the push() method for adding the appointment data to database. push() method will create a random id in the database, and the set() method will contain the data from the form. The then() callback will execute after the data is added in the Firebase database.

RaisedButton(onPressed: () {
  final dbRef = FirebaseDatabase.instance.reference().child("CalendarData");
    "StartTime": '07/04/2020 07:00:00',
    "EndTime": '07/04/2020 08:00:00',
  }).then((_) {
        SnackBar(content: Text('Successfully Added')));
  }).catchError((onError) {
}, child: Text("Add")),

STEP 7: By using the remove() method, you can remove the entire data in the firebase database.

RaisedButton(onPressed: () {
  final dbRef = FirebaseDatabase.instance.reference().child("CalendarData");
}, child: Text("Delete")),


View sample in GitHub

firebase calendar









You must log in to leave a comment
Muhammad Yahya
Nov 25, 2020

Im trying implement this code into firestore, but i got so many error, do you have any documentaion for this calender and how its work with firestore? Thank you

Indumathi Ravichandran [Syncfusion]
Nov 26, 2020

Hi Muhammad,

Thank you for contacting Syncfusion support.

For storing data to Firestore and retrieving calendar data from Firestore you need to create a sample in Firebase console and configure those project to Flutter calendar sample. Kindly refer the following links for the same.

Links: https://console.firebase.google.com/ https://firebase.google.com/docs/flutter/setup?platform=android

Also please find the sample link for the same. https://github.com/SyncfusionExamples/firebase-get-and-update-wth-flutter-event-calendar

We hope that this helps you. Please let us know if you need further assistance.

Regards, Indumathi R


Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon