How to get appointment details from the OnTap event of the Flutter Calendar?
Using the Flutter Event Calendar, you can retrieve tapped appointment details using the `OnTap` event.
|
|
|
STEP 1: Inside the state, initialize the alert dialog text variables:
String? _subjectText = '', _startTimeText = '', _endTimeText = '', _dateText = '', _timeDetails = ''; Color? _headerColor, _viewHeaderColor, _calendarColor;
STEP 2: Add the `OnTap` callback to the flutter calendar. Please find the following code for the calendar.
child: SfCalendar( viewHeaderStyle: ViewHeaderStyle(backgroundColor: _viewHeaderColor), backgroundColor: _calendarColor, view: CalendarView.week, allowedViews: [ CalendarView.day, CalendarView.week, CalendarView.workWeek, CalendarView.month, CalendarView.timelineDay, CalendarView.timelineWeek, CalendarView.timelineWorkWeek, ], monthViewSettings: MonthViewSettings(showAgenda: true), dataSource: getCalendarDataSource(), onTap: calendarTapped, ),
STEP 3: Use the `OnTap` event to retrieve appointment details such as Subject, StartTime, and EndTime, then display them in an alert dialog:
if (details.targetElement == CalendarElement.appointment ||
details.targetElement == CalendarElement.agenda) {
final Appointment appointmentDetails = details.appointments![0];
_subjectText = appointmentDetails.subject;
_dateText = DateFormat('MMMM dd, yyyy')
.format(appointmentDetails.startTime)
.toString();
_startTimeText =
DateFormat('hh:mm a').format(appointmentDetails.startTime).toString();
_endTimeText =
DateFormat('hh:mm a').format(appointmentDetails.endTime).toString();
if (appointmentDetails.isAllDay) {
_timeDetails = 'All day';
} else {
_timeDetails = '$_startTimeText - $_endTimeText';
}
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Container(child: new Text('$_subjectText')),
content: Container(
height: 80,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'$_dateText',
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 20,
),
),
],
),
Row(
children: <Widget>[
Text(''),
],
),
Row(
children: <Widget>[
Text(_timeDetails!,
style: TextStyle(
fontWeight: FontWeight.w400, fontSize: 15)),
],
)
],
),
),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.of(context).pop();
},
child: new Text('close'))
],
);
});
}
}
|
Conclusion
I hope you enjoyed learning about how to get appointment details from the OnTap event of the Flutter Calendar.
You can refer to our Flutter Calendar feature tour page to know about its other groundbreaking feature representation and documentation, and how to quickly get started for configuration specifications.
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!
