How to get appointment details from the OnTap event of the Flutter Calendar?
Using the Flutter Event Calendar, you can get the tapped appointment details using the `OnTap` event.
|
|
|
STEP 1: Inside the state initialize the alert dialog texts.
String? _subjectText = '', _startTimeText = '', _endTimeText = '', _dateText = '', _timeDetails = ''; Color? _headerColor, _viewHeaderColor, _calendarColor;
STEP 2: Trigger the `OnTap` callback of 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: Using the `OnTap` event, you can get the tapped appointment details such as Subject, StartTime, and EndTime from the callback and assign it to the content of the alert dialog widget as per the following code snippet.
void calendarTapped(CalendarTapDetails details) {
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 representations. You can also explore our 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!
