Articles in this section
Category / Section

How to interact with event calendar cell when appointments loaded in the Flutter Calendar

1 min read

In the Flutter Event Calendar, you can add padding at the right end of a cell to interact when the calendar cells have appointments using cellEndPadding

STEP 1: Inside the state initialize the default values.

String? _subjectText = '',
    _startTimeText = '',
    _endTimeText = '',
    _dateText = '',
    _timeDetails = '';

STEP 2: Assign the value to cellEndPadding property of the calendar and using the onTap callback of the calendar, you can show the tapped details whether its calendar cell or appointment.

child: SfCalendar(
  view: CalendarView.day,
  dataSource: getCalendarDataSource(),
  onTap: calendarTapped,
  cellEndPadding: 40,
),
 
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();
    _timeDetails = '$_startTimeText - $_endTimeText';
  } else if (details.targetElement == CalendarElement.calendarCell) {
    _subjectText = "You have tapped cell";
    _dateText = DateFormat('MMMM dd, yyyy').format(details.date!).toString();
    _timeDetails = '';
  }
  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,
                      ),
                    ),
                  ],
                ),
                Container(
                  height: 40,
                  child: 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

cell end padding

 

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