--- title: "How to Load More Data on Demand in Flutter Event Calendar" published_at: "2021-05-24T11:09:19+00:00" modified_at: "2026-02-10T11:12:08+00:00" url: "https://www.syncfusion.com/blogs/post/load-more-data-on-demand-in-flutter-event-calendar" excerpt: "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..." taxonomy_category: - "Desktop" - "Flutter" - "Mobile" taxonomy_post_tag: - "Android" - "Event Calendar" - "Flutter" - "Mobile App Development" - "Web Development" --- # How to Load More Data on Demand in Flutter Event Calendar [Nijamudeen](https://www.syncfusion.com/blogs/author/nijamudeensulaiman) ![How to Load More Data on Demand in Flutter Event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/How-to-Load-More-Data-on-Demand-in-Flutter-Event-Calendar.png) 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](https://www.syncfusion.com/flutter-widgets/flutter-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](https://www.syncfusion.com/forums/164043/essential-studio-2021-volume-1-release-v19-1-0-54-is-available-for-download) . ## 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](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/loadMoreWidgetBuilder.html) 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( 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))); ``` ## Loading appointments We update the appointments on demand when the loading indicator is displayed in the Flutter event Calendar by using the [handleLoadMore](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource/handleLoadMore.html) method in the [CalendarDataSource](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/CalendarDataSource-class.html) . This allows you to add the appointments to the data source, update the data source, and notify the listener to update the appointment in the view. Refer to the following code example. ``` class _MeetingDataSource extends CalendarDataSource { _MeetingDataSource(List source) { appointments = source; } @override Future handleLoadMore(DateTime startDate, DateTime endDate) async { await Future.delayed(Duration(seconds: 1)); final List meetings = []; DateTime date = DateTime(startDate.year, startDate.month, startDate.day); final DateTime appEndDate = DateTime(endDate.year, endDate.month, endDate.day, 23, 59, 59); while (date.isBefore(appEndDate)) { final List? data = _dataCollectionThu, 14 Nov 2024 02:12:21 +0000; if (data == null) { date = date.add(Duration(days: 1)); continue; } for (final Appointment meeting in data) { if (appointments!.contains(meeting)) { continue; } meetings.add(meeting); } date = date.add(Duration(days: 1)); } appointments!.addAll(meetings); notifyListeners(CalendarDataSourceAction.add, meetings); } } ``` ![Loading more data on demand in Flutter event Calendar](https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/Loading-more-data-on-demand-in-Flutter-event-Calendar.gif) Loading more data on demand in Flutter event Calendar ## GitHub reference You can also check out [Load more data on demand in Flutter event Calendar](https://github.com/SyncfusionExamples/lazily-loading-events-flutter-calendar) demo project. ## Conclusion In this blog post, we’ve seen how to load appointments on demand using the load-more feature in the [Flutter event Calendar](https://www.syncfusion.com/flutter-widgets/flutter-calendar) . This feature is available in our [2021 Volume 1 release](https://www.syncfusion.com/forums/164043/essential-studio-2021-volume-1-release-v19-1-0-54-is-available-for-download) . This feature loads appointments on demand for the visible date range with a loading indicator. This improves the loading performance of appointments ranging multiple years. Try out this online demo to [load more appointments](https://flutter.syncfusion.com/#/event-calendar/load-more) in our Calendar and share your feedback or questions in the comments section below. Our Calendar component is also available in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-calendar) , ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/calendar) , [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/calendar) ), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-calendar) , [Angular](https://www.syncfusion.com/angular-ui-components/angular-calendar) , [React](https://www.syncfusion.com/react-ui-components/react-calendar) , [Vue](https://www.syncfusion.com/vue-ui-components/vue-calendar) , [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-calendar) , [UWP](https://www.syncfusion.com/uwp-ui-controls/calendar) , [WinForms](https://www.syncfusion.com/winforms-ui-controls/calendar) , [WPF](https://www.syncfusion.com/wpf-ui-controls/calendar) , and [WinUI](https://www.syncfusion.com/winui-controls/calendar) platforms. Use them to build astonishing applications! For existing customers, the new version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads) page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our available features. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents) , or [feedback portal](https://www.syncfusion.com/feedback/flutter) . We are here to help you succeed! ## Related blogs - [How to Perform Lazy Loading in Flutter Data Table](https://www.syncfusion.com/blogs/post/lazy-loading-in-flutter-data-table.aspx) - [What’s New in 2021 Volume 1: Flutter Event Calendar](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-1-flutter-event-calendar.aspx) - [Implement Effective Pagination in the Flutter ListView in Just 4 Steps!](https://www.syncfusion.com/blogs/post/implement-effective-pagination-in-the-flutter-listview-in-just-4-steps.aspx) - [How to Load Appointments On Demand Using Web Services in Flutter Event Calendar](https://www.syncfusion.com/blogs/post/how-to-load-appointments-on-demand-using-web-services-in-flutter-event-calendar.aspx)