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:
|
|