flutter table calendar events list

Question

I'm trying to add events to the table calendar using a list, but without success because the calendar looks like it's in the photo below:

in the documentation they say that the calendar takes a dynamic list, and a function of type date time

Events 
The complete example is available here.

You can supply custom events to TableCalendar widget. To do so, use eventLoader property - you will be given a DateTime object, to which you need to assign a list of events.

eventLoader: (day) {
  return _getEventsForDay(day);
},

well I have a list of dates coming from an api, which is the one below

[2021-07-11 00:00:00.000, 2021-07-25 00:00:00.000, 2021-07-26 00:00:00.000, 2021-07-27 00:00:00.000, 2021-09-01 00:00:00.000, 2021-09-01 00:00:00.000, 2021-09-03 00:00:00.000, 2021-09-03 00:00:00.000, 2021-09-22 00:00:00.000, 2021-09-24 00:00:00.000, 2021-10-18 00:00:00.000, 2021-10-21 00:00:00.000]

this list is in string format so I converted it like this:

final events = await _jobsServices.getEvents();
        final eventsConvert = events
            .map((date) => (DateTime.parse(date.dataDoJob)))
            .toList();


        eventsList.assignAll(eventsConvert);

the first list called events and the list that receives the data that comes from the api so I converted it to date time format, but as you can see in the photo, all calendar days are marked,

on my calendar widget I put it like this:

TableCalendar(
              eventLoader: (day) => controller.eventsList, //THIS IS THE EVENTS
              calendarBuilders: const CalendarBuilders(),
              focusedDay: controller.focusedDay.value,
              firstDay: DateTime(2019),
              lastDay: DateTime(2050),
              headerStyle:
                  const HeaderStyle(formatButtonVisible: false), //WEEK VISIBLE
              locale: 'pt_BR',
              daysOfWeekVisible: true,
              calendarFormat: controller.format.value,
              onFormatChanged: (CalendarFormat _format) =>
                  controller.calendarFormat(_format),
              onDaySelected: (DateTime userSelectedDay, DateTime focusedDay) =>
                  controller.selectedDay(userSelectedDay, focusedDay),
              calendarStyle: CalendarStyle(
                  selectedTextStyle: const TextStyle(color: Colors.white),
                  isTodayHighlighted: true,
                  selectedDecoration: BoxDecoration(
                      color: context.buttomThemeClicled,
                      shape: BoxShape.circle)),
              selectedDayPredicate: (DateTime date) {
                return isSameDay(controller.focusedDay.value, date);
              },
            );

if someone can help me I would appreciate it a lot, I've been at it for days

the docs: https://pub.dev/packages/table_calendar

Answer 1

The reason why the TableCalendar displays the events incorrectly is that you need to map Events object with DateTime. Here's a sample provided on how you can setup an Event object. A complete sample for display Events is also provided by the plugin here which you can try out.