We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load appointments On-Demand in Flutter Calendar

In the Flutter Event Calendar, load the appointments in on-demand by using the handleLoadMore  method and customize the loading indicator by using the loadMoreWidgetBuilder.

In initState(), set the default values  for the calendar.

List<String> _subjectCollection = <String>[];
List<Color> _colorCollection = <Color>[];
MeetingDataSource _events = MeetingDataSource(<_Meeting>[]);
void initState() {

The loadMoreWidgetBuilder to customizes the load more indicator.

Widget loadMoreWidget(
    BuildContext context, LoadMoreCallback loadMoreAppointments) {
  return FutureBuilder<void>(
    initialData: 'loading',
    future: loadMoreAppointments(),
    builder: (context, snapShot) {
      return Container(
          alignment: Alignment.center, child: CircularProgressIndicator());

Define the Flutter calendar with the loadMoreWidgetBuilder.

  child: SfCalendar(
  view: CalendarView.day,
  allowedViews: [
  dataSource: _events,
  loadMoreWidgetBuilder: loadMoreWidget,

Override the handleLoadMore method to populate the appointments in on-demand.

class MeetingDataSource extends CalendarDataSource {
  List<_Meeting> source;
  List<dynamic> get appointments => source;
  DateTime getStartTime(int index) {
    return source[index].from;
  DateTime getEndTime(int index) {
    return source[index].to;
  bool isAllDay(int index) {
    return source[index].isAllDay;
  String getSubject(int index) {
    return source[index].eventName;
  Color getColor(int index) {
    return source[index].background;
  Future<void> handleLoadMore(DateTime startDate, DateTime endDate) async {
    await Future<void>.delayed(const Duration(seconds: 1));
    List<_Meeting> meetings = <_Meeting>[];
    DateTime date = DateTime(startDate.year, startDate.month, startDate.day);
    DateTime appEndDate =
        DateTime(endDate.year, endDate.month, endDate.day, 23, 59, 59);
    while (date.isBefore(appEndDate)) {
      final List<_Meeting>? data = _dataCollection[date];
      if (data == null) {
        date = date.add(const Duration(days: 1));
      for (final _Meeting meeting in data) {
        if (appointments.contains(meeting)) {
      date = date.add(const Duration(days: 1));
    notifyListeners(CalendarDataSourceAction.add, meetings);;

View sample in GitHub

Flutter Calendar loadMoreWidget


You must log in to leave a comment
Feb 12, 2022

How to add a list of appointments in sequence as declared in the List , i don't want to use the Random in subject: _subjectCollection[random.nextint(9)]while defining the subject in Appointment , I tried it by looping and creating a function for it but it didn't work Kindly suggest some alternative

Indumathi Ravichandran [Syncfusion]
Feb 14, 2022

Hi Akshay,

Based on the shared information, we have prepared the simple sample without using the random values for subject, color and it was working fine as expected from our end. We have attached the tested sample for the same. Please find the sample from the following link.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/flutter_appointments-747201475.zip

We hope that this helps you. Please let us know if you need further assistance.

Regards, Indumathi R


Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile