How to add the appointments to the Firebase database using appointment editor in the Flutter Calendar
In the Flutter Event Calendar, you can add the appointment to the Firebase database using the appointment editor.
STEP 1: In the initState() method, set the default values for the calendar.
CalendarController _controller;
List<String> _eventNameCollection;
@override
void initState() {
_controller=CalendarController();
_events = DataSource(getMeetingDetails());
_selectedAppointment = null;
_selectedColorIndex = 0;
_selectedTimeZoneIndex = 0;
_subject = '';
_notes = '';
super.initState();
}
STEP 2: The onTap callback event of the calendar widget returns the tapped element, tapped date, and tapped appointment details. You can use this to add an appointment using the editor.
void onCalendarTapped(CalendarTapDetails calendarTapDetails) {
if (calendarTapDetails.targetElement != CalendarElement.calendarCell &&
calendarTapDetails.targetElement != CalendarElement.appointment) {
return;
}
_selectedAppointment = null;
_isAllDay = false;
_selectedColorIndex = 0;
_selectedTimeZoneIndex = 0;
_subject = '';
_notes = '';
if (_controller.view == CalendarView.month) {
_controller.view = CalendarView.day;
} else {
if (calendarTapDetails.appointments != null &&
calendarTapDetails.appointments.length == 1) {
final Meeting meetingDetails = calendarTapDetails.appointments[0];
_startDate = meetingDetails.from;
_endDate = meetingDetails.to;
_isAllDay = meetingDetails.isAllDay;
_selectedColorIndex =
_colorCollection.indexOf(meetingDetails.background);
_selectedTimeZoneIndex = meetingDetails.startTimeZone == ''
? 0
: _timeZoneCollection.indexOf(meetingDetails.startTimeZone);
_subject = meetingDetails.eventName == '(No title)'
? ''
: meetingDetails.eventName;
_notes = meetingDetails.description;
_selectedAppointment = meetingDetails;
} else {
final DateTime date = calendarTapDetails.date;
_startDate = date;
_endDate = date.add(const Duration(hours: 1));
}
_startTime =
TimeOfDay(hour: _startDate.hour, minute: _startDate.minute);
_endTime = TimeOfDay(hour: _endDate.hour, minute: _endDate.minute);
Navigator.push<Widget>(
context,
MaterialPageRoute(
builder: (BuildContext context) => AppointmentEditor()),
);
}
}
STEP 3: Assign the onCalendarTapped to the onTap callback property and set the _events as the dataSource for the Syncfusion Flutter Calendar:
child: SfCalendar(
view: CalendarView.month,
controller: _controller,
dataSource: _events,
onTap: onCalendarTapped,
monthViewSettings: MonthViewSettings(
appointmentDisplayMode:
MonthAppointmentDisplayMode.appointment),
))));
STEP 4: After editing the editor fields, you can add appointment details to both the calendar and Firebase database. The push() method adds the appointment data to the Firebase database by creating a random ID, and the set() method stores the data from the form. The then() callback is executed after the data is successfully added to the Firebase database.
IconButton(
padding: const EdgeInsets.fromLTRB(5, 0, 5, 0),
icon: const Icon(
Icons.done,
color: Colors.white,
),
onPressed: () {
final List<Meeting> meetings = <Meeting>[];
if (_selectedAppointment != null) {
_events.appointments.removeAt(
_events.appointments.indexOf(_selectedAppointment));
_events.notifyListeners(CalendarDataSourceAction.remove,
<Meeting>[]..add(_selectedAppointment));
}
meetings.add(Meeting(
from: _startDate,
to: _endDate,
background: _colorCollection[_selectedColorIndex],
startTimeZone: _selectedTimeZoneIndex == 0
? ''
: _timeZoneCollection[_selectedTimeZoneIndex],
endTimeZone: _selectedTimeZoneIndex == 0
? ''
: _timeZoneCollection[_selectedTimeZoneIndex],
description: _notes,
isAllDay: _isAllDay,
eventName: _subject == '' ? '(No title)' : _subject,
));
final dbRef = FirebaseDatabase.instance
.reference()
.child("CalendarAppointmentCollection");
dbRef.push().set({
"StartTime": _startDate.toString(),
"EndTime": _endDate.toString(),
"Subject": _subject,
}).then((_) {
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Successfully Added')));
}).catchError((onError) {
print(onError);
});
_events.appointments.add(meetings[0]);
_events.notifyListeners(
CalendarDataSourceAction.add, meetings);
_selectedAppointment = null;
Navigator.pop(context);
})
|
|
|
|
Note: Create a sample in firebase console project and configure firebase sample with created Flutter sample and make sure as runnable. Please refer the following link for the same.
| |
