[Flutter] How to load events from external JSON to flutter table_calender plugin

I am using table_calendar plugin in my flutter application. I want to load the events to the calendar from external JSON. When the open the calendar the events be displayed in calendar and when click in the date the events should be displayed.

This is the code i am using.

Here is my code, the calendar working but dont load the events

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Table Calendar Example',
home: CalendarPage(),
);
}
}

class CalendarPage extends StatefulWidget {
@override
_CalendarPageState createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
late Map<DateTime, List<Event>> events;
late DateTime selectedDay;
late DateTime focusedDay;

@override
void initState() {
super.initState();
selectedDay = DateTime.now();
focusedDay = DateTime.now();
events = {};
fetchEvents();
}

Future<void> fetchEvents() async {
final response = await http.get(Uri.parse('https://myurljson/events.json'));

if (response.statusCode == 200) {
final List<dynamic> eventList = json.decode(response.body);
setState(() {
for (var event in eventList) {
DateTime eventDate = DateTime.parse(event['startDate']);
Event newEvent = Event(id: event['id'], title: event['title']);
if (events[eventDate] == null) {
events[eventDate] = [];
}
events[eventDate]!.add(newEvent);
}
});
} else {
throw Exception('Failed to load events');
}
}

List<Event> getEventsForDay(DateTime day) {
return events[day] ?? [];
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Table Calendar'),
),
body: Column(
children: [
TableCalendar(
firstDay: DateTime.utc(2020, 1, 1),
lastDay: DateTime.utc(2030, 12, 31),
focusedDay: focusedDay,
selectedDayPredicate: (day) => isSameDay(selectedDay, day),
onDaySelected: (selectedDay, focusedDay) {
setState(() {
this.selectedDay = selectedDay;
this.focusedDay = focusedDay;
});
},
eventLoader: (day) => getEventsForDay(day),
calendarBuilders: CalendarBuilders(
markerBuilder: (context, date, events) {
if (events.isNotEmpty) {
return Positioned(
right: 1,
bottom: 1,
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
width: 16,
height: 16,
),
);
}
return null;
},
),
),
const SizedBox(height: 20),
Expanded(
child: ListView.builder(
itemCount: getEventsForDay(selectedDay).length,
itemBuilder: (context, index) {
return ListTile(
title: Text(getEventsForDay(selectedDay)[index].title),
);
},
),
),
],
),
);
}
}

class Event {
final String id;
final String title;

Event({
required this.id,
required this.title,
});
}


My JSON

My json structure

[
{
"id": "1",
"title": "New Year's Day",
"startDate": "2024-10-01"
},
{
"id": "2",
"title": "Valentine's Day",
"startDate": "2024-10-14"
},
{
"id": "3",
"title": "Earth Day",
"startDate": "2024-10-22"
},
{
"id": "4",
"title": "Independence Day",
"startDate": "2024-10-22"
},
{
"id": "5",
"title": "Halloween",
"startDate": "2024-10-31"
}
]


I hope anyone can give me an answer on how to load data from external JSON.

Thank you

Continue reading...