Flutter Table Calendar Events List

In the documentation, they say that the calendar takes a dynamic list, and a function of type DateTime

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 is called events, and the list that receives the data that comes from the api, so I converted it to a 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);
              },
            );

Fix Showing Events Dots on Every Date for Table Calendar

You’re trying to mark events on a TableCalendar using a list of date strings from an API, but all days in the calendar are showing as having events (see image).

eventLoader: (day) => controller.eventsList, // controller.eventsList is a List

eventLoader expects a function that returns a list of events only for the specific day passed in, but you’re returning the entire list of events every time, regardless of the day.

Solution:

You need to convert the list of event DateTimes into a Map where each key is a day (normalized to remove the time), and the value is a list of events for that day. Then use that map in eventLoader.

Note: In this example, the API response is mocked as a List for demonstration purposes.

class _CalendarScreenState extends State {
 late final Map> _eventsMap;
 final DateTime _focusedDay = DateTime(2021, 11, 10);
 final DateTime _selectedDay = DateTime(2021, 11, 10);

 final List apiDates = [
   '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',
   '2021-11-10 00:00:00.000',
   '2021-11-15 00:00:00.000',
   '2021-11-15 00:00:00.000',
 ];
 @override
 void initState() {
   super.initState();
   _eventsMap = _convertEvents(apiDates);
 }
 Map> _convertEvents(List eventStrings) {
   final map = >{};
   for (var dateStr in eventStrings) {
     final parsed = DateTime.parse(dateStr);
     final dateOnly = DateTime(parsed.year, parsed.month, parsed.day);
     map.putIfAbsent(dateOnly, () => []).add('Evento');
   }
   return map;
 }
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: const Text('Table Calendar Example')),
     body: Padding(
       padding: const EdgeInsets.all(16.0),
       child: TableCalendar(
         locale: 'pt_BR',
         focusedDay: _focusedDay,
         firstDay: DateTime(2019),
         lastDay: DateTime(2050),
         startingDayOfWeek: StartingDayOfWeek.monday,
         calendarFormat: CalendarFormat.month,
         headerStyle: const HeaderStyle(formatButtonVisible: false),
         calendarStyle: const CalendarStyle(
           selectedDecoration: BoxDecoration(
             color: Colors.orange,
             shape: BoxShape.circle,
           ),
           todayDecoration: BoxDecoration(
             color: Colors.blueAccent,
             shape: BoxShape.circle,
           ),
         ),
         selectedDayPredicate: (day) => isSameDay(day, _selectedDay),
         eventLoader: (day) {
           final dateOnly = DateTime(day.year, day.month, day.day);
           return _eventsMap[dateOnly] ?? [];
         },
         onDaySelected: (selectedDay, focusedDay) {
           print('Selected: $selectedDay');
         },
       ),
     ),
   );
 }
}

Screenshot:

Also Read:

Flutter BLoC Tutorial