Category / Section
How to show the tapped appointment details on another page in the Flutter Calendar
1 min read
In the Flutter Event Calendar, you can display appointment details on a separate page by using the MaterialPageRoute of the Navigator.
Use the onTap callback of the Flutter event calendar to detect when user taps on an appointment using the targetElement of the calendar and navigate to the required page with the appointment.
void calendarTapped(CalendarTapDetails calendarTapDetails) {
if (calendarTapDetails.targetElement == CalendarElement.appointment) {
Appointment appointment = calendarTapDetails.appointments![0];
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute(appointment:appointment)),
);
}
}
In the second page get the appointment details from the parameter of the constructor and show the appointment details (subject, startTime, endTime ) in the page.
body: SfCalendar(
allowedViews: [
CalendarView.day,
CalendarView.week,
CalendarView.workWeek,
CalendarView.month,
CalendarView.timelineDay,
CalendarView.timelineWeek,
CalendarView.timelineWorkWeek,
CalendarView.timelineMonth,
CalendarView.schedule
],
view: CalendarView.month,
monthViewSettings: MonthViewSettings(showAgenda: true),
onTap: calendarTapped,
dataSource: _getCalendarDataSource(),
));
class SecondRoute extends StatelessWidget {
Appointment? appointment;
SecondRoute({this.appointment});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Column(
children: [
Divider(color: Colors.white,),
Center(
child: Text(
appointment!.subject,
),
),
Divider(color: Colors.white,),
Center(
child: Text(
DateFormat('MMMM yyyy,hh:mm a').format(appointment!.startTime,).toString()),
),
Divider(color: Colors.white,),
Center(
child: Text(
DateFormat('MMMM yyyy,hh:mm a').format(appointment!.endTime,).toString()),
),
],
),
);
}
}
|
