How to load the JSON data (online) to the Flutter Calendar appointments
In the Flutter Event Calendar, you can load the JSON data (online) to the Flutter calendar events. Using the http package, you can fetch the data from the internet.
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: To fetch the data from the web, create async method named as getDataFromWeb() and get the 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'),
),
);
}
},
),
|
Hi Brainative,
Thank you for contacting Syncfusion support.
Regarding Query: I'm looking for an example code about resource view with json (online) in Flutter. Can you help me?
We have prepared the simple sample for loading the resource view image from online Json data. Please find the sample from the following link.
Sample link: https://www.syncfusion.com/downloads/support/forum/161060/ze/background_calendar-686909775.zip
We hope that this helps you. Please let us know if you need further assistance.
Regards, Indumathi R
Hola, necesito agregar eventos al calendario desde una API externa que devuelve una lista de eventos en formato .json como la siguiente {"event_list": [{"event_1": " 03/09/2021 14:00 "}, {"event2": " 20 / 11/2021 16:00 "}, {" event n ":" 30/09/2021 08:00 "} ]} , ojala puedan ayudarme. saludos!
Hi Jose,
Thank you for contacting Syncfusion support.
Based on the shared information your requirement “Events like {"event_list": [{"event_1": "09/03/2021 14:00"}, {"event2 ":" 11/20/2021 16:00 "}, {" event n ":" 09/30/2021 08:00 "}]}”
We are loading the JSON file data to flutter calendar events from URL https://js.syncfusion.com/demos/ejservices/api/Schedule/LoadData to the Flutter calendar events. In that URL, we have stored a list of events( JSON) and we have mapped the required data into the custom appointments by converting JSON string value to the appropriate type. In our data: Event: [StartTime], [EndTime], [Subject]
As per your requirement, kindly convert the JSON file(contains a list of events) and map the type property to the flutter calendar events property.
We hope that this helps you. Please let us know if you need further assistance.
Regards, Muthulakshmi K
I have an issue with loaded data in flutter . the problem is every time I navigate to a month the data loads even if the events already loaded which cause events to be duplicated in the calendar , tried appointments.clear() , but it didn't work so is there a solution .
I'm looking for an example code about Resource view includes profile image with json (online) in Flutter. Can you help me?