Category / Section
How to load the appointment from json to calendar with loadMoreWidgetBuilder
1 min read
In the Flutter Calendar, the appointment can be showed from json and loaded it to the calendar by using loadMoreWidgetBuilder.
STEP 1: In initState(), initialize the default values.
MeetingDataSource _events = MeetingDataSource(<_Meeting>[]);
@override
void initState() {
super.initState();
}
STEP 2: Define the calendar with the loadMoreWidgetBuilder.
child: SfCalendar(
initialDisplayDate: DateTime(2017, 05, 01),
view: CalendarView.month,
allowedViews: [
CalendarView.day,
CalendarView.week,
CalendarView.workWeek,
CalendarView.month,
CalendarView.timelineDay,
CalendarView.timelineWeek,
CalendarView.timelineWorkWeek,
CalendarView.timelineMonth,
CalendarView.schedule,
],
dataSource: _events,
loadMoreWidgetBuilder: loadMoreWidget,
)
Widget loadMoreWidget(
BuildContext context, LoadMoreCallback loadMoreAppointments) {
return FutureBuilder<void>(
initialData: 'loading',
future: loadMoreAppointments(),
builder: (context, snapShot) {
return Container(
alignment: Alignment.center, child: CircularProgressIndicator());
},
);
}
STEP 3: The handleLoadMore handles the appointment from the json data and loads it to the Flutter calendar.
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));
http.Response data = await http.get(Uri.parse(
"https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData"));
dynamic jsonData = json.decode(data.body);
final List<_Meeting> appointmentData = [];
for (dynamic data in jsonData) {
_Meeting meetingData = _Meeting(
data['Subject'],
_convertDateFromString(
data['StartTime'],
),
_convertDateFromString(data['EndTime']),
Colors.red,
data['AllDay']);
appointmentData.add(meetingData);
}
appointments.addAll(appointmentData);
notifyListeners(CalendarDataSourceAction.add, appointmentData);
}
DateTime _convertDateFromString(String date) {
return DateTime.parse(date);
}
}
|
