Flutter Table Calendar (v.3.0.2) : Show all data from REST API based on date

Viewed 272

I'm trying to load all data objects fetched from REST API into TableCalendar and show their values under the calendar based on the currently picked date

Response looks like this:

 [{
   "id" : "abc321",
   "name" : "header1",
   "description" : "desc1",
   "date" : {
    "day" : 10,
    "month" : 10,
    "year" : 2020
  },
 }, 
 {
   "id" : "321abc",
   "name" : "header2",
   "description" : "desc2",
   "date" : {
   "day" : 5,
   "month" : 5,
   "year" : 2020
  },
 }]

FetchData Future looks like this:

Future<List<ObjectName>>? getData() async {
    const String url = 'urlOfAPI';

    var response = await http.get(
      Uri.parse(url),
      headers: {
        "content-type": "application/json",
        "accept": "application/json",
      },
    );

    if (response.statusCode == 200) {
      final parsed = json.decode(response.body).cast<Map<String, dynamic>>();
      return parsed.map<ObjectName>((json) => ObjectName.fromJson(json)).toList();
    } else {
      throw Exception('Failed to load');
    }
  }

TableCalendar initial code:

CalendarFormat _calendarFormat = CalendarFormat.twoWeeks;
DateTime _focusedDay = DateTime.now();
DateTime? _selectedDay = DateTime.now();

return TableCalendar(
  firstDay: DateTime.now(),
  lastDay: DateTime(DateTime.now().year + 10),
  focusedDay: _focusedDay,
  calendarFormat: _calendarFormat,
  selectedDayPredicate: (day) {
    return isSameDay(_selectedDay, day);
  },
  onDaySelected: (selectedDay, focusedDay) {
    if (!isSameDay(_selectedDay, selectedDay)) {
      setState(() {
        _selectedDay = selectedDay;
        _focusedDay = focusedDay;
      });
    }
  },
  onFormatChanged: (format) {
    if (_calendarFormat != format) {
      setState(() {
        _calendarFormat = format;
      });
    }
  },
  onPageChanged: (focusedDay) {
    _focusedDay = focusedDay;
  },
);

e.g. I'd like to show all objects inside the calendar and show only "object1" or "object2" values under the calendar when picked date is "10/10/2020" or "5/5/20" respectively.

0 Answers
Related