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 property.
STEP 1: Inside the state, initialize the default values.
String? _subjectText = '', _startTimeText = '', _endTimeText = '', _dateText = '', _timeDetails = '';
STEP 2: Assign the value to the cellEndPadding property of the calendar. using the onTap callback of the calendar, you can display the tapped details whether its calendar cell or an 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'))
],
);
});
}
|
