Articles in this section
Category / Section

How to add appointments to Firestore Database using Flutter Calendar?

2 mins read

In the Flutter Calendar, add the appointment data to the Firestore database and show the added data to SfCalendar.

Refer the following link for creating project in the Firestore database.

https://firebase.google.com/docs/firestore/quickstart

Refer the following link for configured Firestore project with created Flutter sample

https://firebase.google.com/docs/flutter/setup?platform=android#register-app


STEP 1: Add the required packages.

syncfusion_flutter_calendar: ^19.1.59
firebase_core: ^1.1.1
cloud_firestore: ^2.1.0

STEP 2: Initialize the default values for the calendar.

List<Color> _colorCollection = <Color>[];
MeetingDataSource? events;
final List<String> options = <String>['Add', 'Delete', 'Update'];
final databaseReference = FirebaseFirestore.instance;

STEP 3: In initState() , populate the appointments data from Firestore to Flutter Calendar by mapping the Firestore doc values to appointment values in Flutter Calendar by using snapShotValue.docs.

@override
void initState() {
  _initializeEventColor();
  getDataFromFireStore().then((results) {
    SchedulerBinding.instance!.addPostFrameCallback((timeStamp) {
      setState(() {});
    });
  });
  super.initState();
}
 
Future<void> getDataFromFireStore() async {
  var snapShotsValue = await databaseReference
      .collection("CalendarAppointmentCollection")
      .get();
 
  final Random random = new Random();
  List<Meeting> list = snapShotsValue.docs
      .map((e) => Meeting(
          eventName: e.data()['Subject'],
          from:
              DateFormat('dd/MM/yyyy HH:mm:ss').parse(e.data()['StartTime']),
          to: DateFormat('dd/MM/yyyy HH:mm:ss').parse(e.data()['EndTime']),
          background: _colorCollection[random.nextInt(9)],
          isAllDay: false))
      .toList();
  setState(() {
    events = MeetingDataSource(list);
  });
}

STEP 4: For adding the appointment data to Firestore, kindly use the set() to add appointment document, delete() to remove the appointment from document, update() will update the changes the appointment changes.

  leading: PopupMenuButton<String>(
  icon: Icon(Icons.settings),
  itemBuilder: (BuildContext context) => options.map((String choice) {
    return PopupMenuItem<String>(
      value: choice,
      child: Text(choice),
    );
  }).toList(),
  onSelected: (String value) {
    if (value == 'Add') {
      databaseReference
          .collection("CalendarAppointmentCollection")
          .doc("1")
          .set({
        'Subject': 'Mastering Flutter',
        'StartTime': '07/04/2020 08:00:00',
        'EndTime': '07/04/2020 09:00:00'
      });
    } else if (value == "Delete") {
      try {
        databaseReference
            .collection('CalendarAppointmentCollection')
            .doc('1')
            .delete();
      } catch (e) {}
    } else if (value == "Update") {
      try {
        databaseReference
            .collection('CalendarAppointmentCollection')
            .doc('1')
            .update({'Subject': 'Meeting'});
      } catch (e) {}
    }
  },
)

STEP 5: Assign the events to the dataSource property of the calendar.

body: SfCalendar(
  view: CalendarView.month,
  initialDisplayDate: DateTime(2020, 4, 5, 9, 0, 0),
  dataSource: events,
  monthViewSettings: MonthViewSettings(
    showAgenda: true,
  ),
)

View sample in GitHub

Firestore appointment


Conclusion

I hope you enjoyed learning about how to add appointments to Firestore Database using Flutter Calendar.

You can refer to our  Flutter Calender feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter Calendar documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied