How to get the current month appointments in the Flutter calendar
In the Flutter Calendar, you can retrieve and display the current month's appointments in an alert dialog using the viewChangedDetails.visibleDates property in the onViewChanged callback.
In the `initState()` method, set the default values:
CalendarDataSource _dataSource;
List<Appointment> _currentMonthAppointments;
@override
void initState() {
_dataSource = _getCalendarDataSource();
_currentMonthAppointments = <Appointment>[];
super.initState();
}
Use the onViewChanged callback of the Flutter calendar to retrieve the current month appointments using viewChangedDetails.visibleDates property.
children: [
RaisedButton(
child: Text('Get current month appointment details'),
onPressed: _showDialog,
),
Expanded(
child: Scrollbar(
child: SfCalendar(
view: CalendarView.month,
dataSource: _dataSource,
onViewChanged: viewChanged,
),
),
),
],
void viewChanged(ViewChangedDetails viewChangedDetails) {
_currentMonthAppointments = GetVisibleAppointments(viewChangedDetails
.visibleDates[viewChangedDetails.visibleDates.length ~/ 2].month);
}
List<Appointment> GetVisibleAppointments(int visibleDates) {
List<Appointment> visibleAppointment = <Appointment>[];
for (int j = 0; j < _dataSource.appointments.length; j++) {
if (visibleDates == _dataSource.appointments[j].startTime.month) {
visibleAppointment.add(_dataSource.appointments[j]);
}
}
return visibleAppointment;
}
Use the onPressed() callback of the RaisedButton to display the current month appointment details in alert window.
_showDialog() async {
await showDialog(
context: context,
// ignore: deprecated_member_use
child: new AlertDialog(
title: Container(
child: Text("Visible dates contains " +
_currentMonthAppointments.length.toString() +
" appointments"),
),
contentPadding: const EdgeInsets.all(16.0),
content: ListView.builder(
itemCount: _currentMonthAppointments.length,
itemBuilder: (BuildContext context, int index) {
return new Text(_currentMonthAppointments[index].subject);
}),
actions: <Widget>[
new FlatButton(
child: const Text('OK'),
onPressed: () {
Navigator.pop(context);
})
],
),
);
}
|
Conclusion
I hope you enjoyed learning about how to get the current month's appointments in the Flutter calendar.
You can refer to our Flutter Calendar feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flutter Calendar example 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!
