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!
You can achieve your requirement by using the onSelectionChanged callback from the Flutter Calendar. Based on your requirement we have updated the sample for the same, please find the updated sample below,
We hope that this helps you.
Thanks! Muniappan help a lot！
but that's not fit the schedule which have Recurrence Continuing from the previous question, if today there is a schedule that happens every week, but today is not startDay, it will not show the schedule
By using the “getOccurrenceAppointment” method you can achieve your requirement. Using this method, you can get the occurrence appointment details for the given pattern appointment at the specified date. If there is no appointment occurring on the date specified, null is returned. Based on that we have updated the sample, please find the sample for the same,
Refer to our UG documentation to know more details about getOccurrenceAppointment in the calendar, https://help.syncfusion.com/flutter/calendar/appointments#get-occurrence-appointment
Hi,
I have set initialSelectedDate, but the event of initialSelectedDate will not be displayed directly
how to achieve
thanks