How to update the custom agenda view events when selected date changes in the Flutter Calendar
In the Flutter Event Calendar, you can update the custom agenda view using the Datasource when changing the `selectedDate` property of the `CalendarController`.
STEP 1: In initState(), set the default values.
List<Appointment>? appointmentDetails = <Appointment>[];
CalendarController? _calendarController = CalendarController();
_DataSource? _dataSource;
@override
void initState() {
_dataSource = _DataSource(getCalendarDataSource());
super.initState();
}
STEP 2: Place the calendar inside the body of the Scaffold widget.
SafeArea( child: SfCalendar( view: CalendarView.month, controller: _calendarController, dataSource: _dataSource, onTap: calendarTapped, onViewChanged: viewChanged, ), ),
STEP 3: This method checks if the selected date contains appointments by comparing the appointment time with the selected date. If they match, it shows the corresponding appointment details in the custom agenda view
void _updateAppointmentDetails() {
appointmentDetails = <Appointment>[];
final DateTime viewStartDate = DateTime(
_calendarController!.selectedDate!.year,
_calendarController!.selectedDate!.month,
_calendarController!.selectedDate!.day,
0,
0,
0);
final DateTime viewEndDate = DateTime(
_calendarController!.selectedDate!.year,
_calendarController!.selectedDate!.month,
_calendarController!.selectedDate!.day,
23,
59,
59);
if (_dataSource!.appointments == null || _dataSource!.appointments!.isEmpty)
return;
for (int i = 0; i < _dataSource!.appointments!.length; i++) {
final Appointment appointment = _dataSource!.appointments![i];
if (appointment.recurrenceRule == null) {
if (_isSameDate(viewStartDate, appointment.startTime) ||
_isSameDate(viewStartDate, appointment.endTime) ||
(appointment.startTime.isBefore(viewStartDate) &&
appointment.endTime.isAfter(viewEndDate))) {
appointmentDetails!.add(appointment);
}
} else {
final List<DateTime> dateCollection =
SfCalendar.getRecurrenceDateTimeCollection(
appointment.recurrenceRule!, appointment.startTime);
for (int j = 0; j < dateCollection.length; j++) {
if (_isSameDate(dateCollection[j], viewStartDate)) {
appointmentDetails!.add(appointment);
}
}
}
}
setState(() {});
}
STEP 4: Implement the `onViewChanged` callback of the Flutter calendar for updating `selectedDate` when view changed to current, next, previous, and updating the corresponding selected date appointments details to the custom agenda view.
void viewChanged(ViewChangedDetails viewChangedDetails) {
SchedulerBinding.instance!.addPostFrameCallback((duration) {
var midDate = (viewChangedDetails
.visibleDates[viewChangedDetails.visibleDates.length ~/ 2]);
if (midDate.month == DateTime.now().month)
_calendarController!.selectedDate = DateTime.now();
else {
_calendarController!.selectedDate = DateTime(
midDate.year,
midDate.month,
01,
9,
0,
0,
);
}
_updateAppointmentDetails();
});
}
STEP 5: Implement the `onTap` callback of the Flutter calendar and call the updtaeAppointmentDetails() method inside the `onTap` callback for getting the selected date appointment details.
void calendarTapped(CalendarTapDetails calendarTapDetails) {
if (calendarTapDetails.targetElement == CalendarElement.calendarCell) {
SchedulerBinding.instance!.addPostFrameCallback((duration) {
_updateAppointmentDetails();
});
}
}
|
|
