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'))
],
);
});
}
|
