Category / Section
How to load JSON data (offline) for Flutter Calendar appointments?
1 min read
In the Flutter Event Calendar, you can load event data from a JSON file. This approach allows you to maintain your calendar events in a structured format outside your main code.
Step 1:
Place your event data in a .json file.
[
{
"name":"Meeting",
"start":"05/04/2020 06:00:00",
"end": "05/04/2020 07:00:00",
"color": "red"
},
{
"name":"Planning",
"start":"07/04/2020 01:00:00",
"end": "07/04/2020 02:00:00",
"color": "red"
},
{
"name":"Retrospective",
"start":"09/04/2020 02:00:00",
"end": "09/04/2020 03:00:00",
"color": "red"
},
{
"name":"Release",
"start":"08/04/2020 07:00:00",
"end": "08/04/2020 08:00:00",
"color": "red"
}
]
Step 2:
Use the `FutureBuilder` widget to load and parse the JSON data:
child: FutureBuilder(
builder: (context, snapshot) {
var showData = json.decode(snapshot.data.toString());
List<Meeting> collection = <Meeting>[];
if (showData != null) {
for (int i = 0; i < showData.length; i++) {
collection.add(Meeting(
eventName: showData[i]['name'],
isAllDay: false,
from: DateFormat('dd/MM/yyyy HH:mm:ss')
.parse(showData[i]['start']),
to: DateFormat('dd/MM/yyyy HH:mm:ss')
.parse(showData[i]['end']),
background: Colors.green));
}
}
return Container(
child: SfCalendar(
view: CalendarView.month,
dataSource: _getCalendarDataSource(collection),
monthViewSettings: MonthViewSettings(showAgenda: true),
));
},
future: DefaultAssetBundle.of(context)
.loadString("assets/appointment.json"),
),
Screenshots:
|
|
|
