Category / Section
How to show a custom agenda view in the Flutter Calendar
3 mins read
In the Flutter Event Calendar, you can integrate custom agenda view using the appointment details from the `OnTap` callback of the calendar.
|
|
|
Step 1:
Inside the state initialize the default values.
List<Appointment> _appointmentDetails=<Appointment>[];
Step 2:
Trigger the `OnTap` callback of the calendar widget and get the appointment details from the `targetElement`. Using the appointment details, you can provide data to the custom agenda view below the calendar widget as per your requirement.
Expanded(
child: SfCalendar(
view: CalendarView.month,
dataSource: getCalendarDataSource(),
onTap: calendarTapped,
),
),
void calendarTapped(CalendarTapDetails calendarTapDetails) {
if (calendarTapDetails.targetElement == CalendarElement.calendarCell) {
setState(() {
appointmentDetails = calendarTapDetails.appointments!.cast<Appointment>();
});
}
}
Step 3:
Use the ` ListView` widget inside the `Expanded` widget for showing appointment details. You can also use the `ListTile` widget to customize the agenda view with appointment details.
body: Column(
children: <Widget>[
Expanded(
child: SfCalendar(
view: _calendarView,
dataSource: getCalendarDataSource(),
onTap: calendarTapped,
),
),
Expanded(
child: Container(
color: Colors.black12,
child: ListView.separated(
padding: const EdgeInsets.all(2),
itemCount: _appointmentDetails.length,
itemBuilder: (BuildContext context, int index) {
return Container(
padding: EdgeInsets.all(2),
height: 60,
color: _appointmentDetails[index].color,
child: ListTile(
leading: Column(
children: <Widget>[
Text(
_appointmentDetails[index].isAllDay
? ''
: '${DateFormat('hh:mm a').format(_appointmentDetails[index].startTime)}',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.white,
height: 1.7),
),
Text(
_appointmentDetails[index].isAllDay
? 'All day'
: '',
style: TextStyle(
height: 0.5, color: Colors.white),
),
Text(
_appointmentDetails[index].isAllDay
? ''
: '${DateFormat('hh:mm a').format(_appointmentDetails[index].endTime)}',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.white),
),
],
),
trailing: Container(
child: Icon(
getIcon(_appointmentDetails[index].subject),
size: 30,
color: Colors.white,
)),
title: Container(
child: Text(
'${_appointmentDetails[index].subject}',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w600,
color: Colors.white))),
));
},
separatorBuilder: (BuildContext context, int index) =>
const Divider(
height: 5,
),
)))
|
|
|
|
