Articles in this section
Category / Section

How to get appointment details from the OnTap event of the Flutter Calendar?

2 mins read

Using the Flutter Event Calendar, you can get the tapped appointment details using the `OnTap` event.

 

appoinments details

 

 

STEP 1: Inside the state initialize the alert dialog texts.

String? _subjectText = '',
    _startTimeText = '',
    _endTimeText = '',
    _dateText = '',
    _timeDetails = '';
Color? _headerColor, _viewHeaderColor, _calendarColor;

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

child: SfCalendar(
  viewHeaderStyle:
      ViewHeaderStyle(backgroundColor: _viewHeaderColor),
  backgroundColor: _calendarColor,
  view: CalendarView.week,
  allowedViews: [
    CalendarView.day,
    CalendarView.week,
    CalendarView.workWeek,
    CalendarView.month,
    CalendarView.timelineDay,
    CalendarView.timelineWeek,
    CalendarView.timelineWorkWeek,
  ],
  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')
        .format(appointmentDetails.startTime)
        .toString();
    _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';
    }
    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Container(child: new Text('$_subjectText')),
            content: Container(
              height: 80,
              child: Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Text(
                        '$_dateText',
                        style: TextStyle(
                          fontWeight: FontWeight.w400,
                          fontSize: 20,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text(''),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text(_timeDetails!,
                          style: TextStyle(
                              fontWeight: FontWeight.w400, fontSize: 15)),
                    ],
                  )
                ],
              ),
            ),
            actions: <Widget>[
              new FlatButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  child: new Text('close'))
            ],
          );
        });
  }
}

View sample in GitHub

Flutter calendar appointment details

 

Conclusion

I hope you enjoyed learning about how to get appointment details from the OnTap event of the Flutter Calendar.

You can refer to our Flutter Calendar feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

 





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