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 show the appointment details in navigation page by using MaterialPageRoute of the Navigator.
Using onTap callback of the Flutter event calendar, get 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()),
),
],
),
);
}
}
|
