Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (48)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (92)DocIO  (20)Essential JS 2  (69)Essential Studio  (162)File Formats  (18)Flutter  (103)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (473)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (24)Windows Forms  (55)WinUI  (16)WPF  (119)Xamarin  (127)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (50)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (45)Development  (252)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (6)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (215)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (22)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (10)Tips and Tricks  (57)UI  (117)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (10)Web  (205)What's new  (126)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
How to Load More Data on Demand in Flutter Event Calendar

How to Load More Data on Demand in Flutter Event Calendar

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)));

Loading appointments

We update the appointments on demand when the loading indicator is displayed in the Flutter event Calendar by using the handleLoadMore method in the CalendarDataSource. 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<Appointment> source) {
    appointments = source;
  }

  @override
  Future<void> handleLoadMore(DateTime startDate, DateTime endDate) async {
    await Future.delayed(Duration(seconds: 1));
    final List<Appointment> meetings = <Appointment>[];
    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<Appointment>? data = _dataCollection[date];
      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
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 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. This feature is available in our 2021 Volume 1 release. 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 in our Calendar and share your feedback or questions in the comments section below.

Our Calendar component is also available in our Blazor, ASP.NET (CoreMVC), JavaScriptAngularReactVueXamarinUWPWinFormsWPF, and WinUI platforms. Use them to build astonishing applications!

For existing customers, the new version is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features.

You can also contact us through our support forumDirect-Trac, or feedback portal. We are here to help you succeed!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top