How to load the JSON data (online) to the Flutter Calendar appointments?
In the Flutter Event Calendar, you can load JSON data from online sources to populate your calendar events. This guide demonstrates how to fetch data from the internet using the http package.
STEP 1: For fetching the data from the web, you need to add the `http` package in the dependencies of pubspec.yaml.
dependencies: http: ^0.12.0+4
STEP 2: Create an asynchronous method named as getDataFromWeb(), to fetch data from the web using the http.get() method:
Future<List<Meeting>> getDataFromWeb() async {
var data = await http.get(Uri.parse("https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData"));
var jsonData = json.decode(data.body);
final List<Meeting> appointmentData = [];
final Random random = new Random();
for (var data in jsonData) {
Meeting meetingData = Meeting(
eventName: data['Subject'],
from: _convertDateFromString(
data['StartTime'],
),
to: _convertDateFromString(data['EndTime']),
background: _colorCollection[random.nextInt(9)],
allDay: data['AllDay']);
appointmentData.add(meetingData);
}
return appointmentData;
}
STEP 3: Using the `FutureBuilder` widget, you can display the online data. If the Snapshot.hasData contains data, then, you can load that web data to the Flutter calendar events.
child: FutureBuilder(
future: getDataFromWeb(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data != null) {
return SafeArea(
child: Container(
child: SfCalendar(
view: CalendarView.week,
initialDisplayDate: DateTime(2017, 6, 01, 9, 0, 0),
dataSource: MeetingDataSource(snapshot.data),
)),
);
} else {
return Container(
child: Center(
child: Text('$_networkStatusMsg'),
),
);
}
},
),
|
Conclusion
I hope you enjoyed learning about how to load the JSON data (online) to the Flutter Calendar appointments.
You can refer to our Flutter Calendar feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
