How to add appointments to Firestore Database using Flutter Calendar?
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, ), )
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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
