How to show custom agenda view in the Flutter Calendar?
In the Flutter Event Calendar, you can integrate a 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,
),
)))
|
|
|
|
Conclusion
I hope you enjoyed learning about how to show custom agenda view in 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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
