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 get appointment details from the OnTap event of the Flutter event calendar (SfCalendar)?

Platform: Flutter |
Control: SfCalendar |
Published Date: February 13, 2020 |
Last Revised Date: November 19, 2020

In the Flutter event calendar, you can get the tapped appointment details using the `OnTap` event.


appoinments details



Step 1:

In initState(), set the default values such as view, alert dialog texts.

CalendarView _calendarView;
String _subjectText, _startTimeText, _endTimeText,
       _dateText, _timeDetails;
void initState() {
  _calendarView = CalendarView.week;
  _subjectText = '';
  _startTimeText = '';
  _endTimeText = '';
  _dateText = '';
  _timeDetails = '';


Step 2:

Trigger the `OnTap` callback of the flutter calendar. Please find the following code for the calendar.

  child: SfCalendar(
    view: _calendarView,
    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')
    _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';
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Container(child: new Text('$_subjectText')),
            content: Container(
              height: 80,
              child: Column(
                children: <Widget>[
                    children: <Widget>[
                        style: TextStyle(
                          fontWeight: FontWeight.w400,
                          fontSize: 20,
                    children: <Widget>[
                    children: <Widget>[
                          style: TextStyle(
                              fontWeight: FontWeight.w400, fontSize: 15)),
            actions: <Widget>[
              new FlatButton(
                  onPressed: () {
                  child: new Text('close'))


View sample in Github


agenda details

all day details

appointment details



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