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.

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

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

void initState() {
  getDataFromFireStore().then((results) {
    SchedulerBinding.instance!.addPostFrameCallback((timeStamp) {
      setState(() {});
Future<void> getDataFromFireStore() async {
  var snapShotsValue = await databaseReference
  final Random random = new Random();
  List<Meeting> list =
      .map((e) => Meeting(
              DateFormat('dd/MM/yyyy HH:mm:ss').parse(['StartTime']),
          to: DateFormat('dd/MM/yyyy HH:mm:ss').parse(['EndTime']),
          background: _colorCollection[random.nextInt(9)],
          isAllDay: false))
  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) => choice) {
    return PopupMenuItem<String>(
      value: choice,
      child: Text(choice),
  onSelected: (String value) {
    if (value == 'Add') {
        'Subject': 'Mastering Flutter',
        'StartTime': '07/04/2020 08:00:00',
        'EndTime': '07/04/2020 09:00:00'
    } else if (value == "Delete") {
      try {
      } catch (e) {}
    } else if (value == "Update") {
      try {
            .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


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?
Help us improve this page
Please provide feedback or comments
Please  to leave a comment
Access denied
Access denied