We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show the tapped appointment details on another page in the Flutter event calendar

Platform: Flutter |
Control: SfCalendar |
Published Date: February 12, 2021 |
Last Revised Date: February 12, 2021

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

 

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon