When developing an application using a calendar, the most prevalent requirement is the ability to load data on demand in calendar views. Our Syncfusion  Flutter event Calendar provides all the common scheduling functionalities that allow users to load more data on demand.

In this blog, we will see how to load appointments on demand in the Flutter event Calendar using the new load-more feature. This useful feature is available in our  2021 Volume 1 release.

Building load-more widget

We are going to build our own custom widget that will be displayed as a loading indicator in the Flutter Calendar when the calendar view changes. In Calendar schedule view, this loading indicator will be displayed when a user reaches the start or end position to load more appointments.

You can build the custom widget for a loading indicator by using the  loadMoreWidgetBuilder property in the Flutter Calendar.

Refer to the following code example.

return SfCalendar(

controller: calendarController,

dataSource: calendarDataSource,

allowedViews: _allowedViews,

loadMoreWidgetBuilder:

(BuildContext context, LoadMoreCallback loadMoreAppointments) {

return FutureBuilder<void>(

future: loadMoreAppointments(),

builder: (context, snapShot) {

return Container(

height: _calendarController.view == CalendarView.schedule

? 50

: double.infinity,

width: double.infinity,

alignment: Alignment.center,

child: CircularProgressIndicator(

valueColor: AlwaysStoppedAnimation(Colors.blue)));

},

);

},

monthViewSettings: MonthViewSettings(

appointmentDisplayMode: MonthAppointmentDisplayMode.appointment,

appointmentDisplayCount: 4),

timeSlotViewSettings: TimeSlotViewSettings(

minimumAppointmentDuration: const Duration(minutes: 60)));

#flutter #mobile #android #event calendar