Articles in this section
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()),
          ),
        ],
      ),
    );
  }
}

View sample in GitHub

Navigationpage

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied