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>[]);
 
@override
void initState() {
  _addAppointment();
  super.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: [
    CalendarView.day,
    CalendarView.week,
    CalendarView.workWeek,
    CalendarView.month,
    CalendarView.timelineDay,
    CalendarView.timelineWeek,
    CalendarView.timelineWorkWeek,
    CalendarView.timelineMonth,
    CalendarView.schedule,
  ],
  dataSource: _events,
  loadMoreWidgetBuilder: loadMoreWidget,
)

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

 
class MeetingDataSource extends CalendarDataSource {
  MeetingDataSource(this.source);
 
  List<_Meeting> source;
 
  @override
  List<dynamic> get appointments => source;
 
  @override
  DateTime getStartTime(int index) {
    return source[index].from;
  }
 
  @override
  DateTime getEndTime(int index) {
    return source[index].to;
  }
 
  @override
  bool isAllDay(int index) {
    return source[index].isAllDay;
  }
 
  @override
  String getSubject(int index) {
    return source[index].eventName;
  }
 
  @override
  Color getColor(int index) {
    return source[index].background;
  }
 
  @override
  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));
        continue;
      }
 
      for (final _Meeting meeting in data) {
        if (appointments.contains(meeting)) {
          continue;
        }
 
        meetings.add(meeting);
      }
      date = date.add(const Duration(days: 1));
    }
 
    appointments.addAll(meetings);
    notifyListeners(CalendarDataSourceAction.add, meetings);;
  }
}

View sample in GitHub

Flutter Calendar loadMoreWidget

 

ADD COMMENT
You must log in to leave a comment
Comments
Akshay
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

Reply
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

Reply

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