Articles in this section
Category / Section

How to load the JSON data (offline) for the Flutter Calendar appointments

1 min read

In the Flutter Event Calendar, you can load the JSON data for the Flutter calendar events from the JSON file. Here we are using own data`s in the JSON file.

Step 1:

Place the required data’s in the .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:

Access those data using the `FutureBuilder` widget. Please find the following code snippet for the same.

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"),
),

 

View sample in Github.

Screenshots:

 

json data

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied