{"id":12719,"date":"2025-07-11T07:36:58","date_gmt":"2025-07-11T07:36:58","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12719"},"modified":"2025-07-11T07:36:58","modified_gmt":"2025-07-11T07:36:58","slug":"flutter-table-calendar-events-list","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/flutter\/flutter-table-calendar-events-list","title":{"rendered":"Flutter Table Calendar Events List"},"content":{"rendered":"

In the documentation, they say that the calendar takes a dynamic list, and a function of type DateTime<\/strong><\/p>\n

\"calendar\"<\/p>\n

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.
\neventLoader: (day) { return _getEventsForDay(day); },<\/p>\n

Well, I have a list of dates coming from an api, which is the one below
\n[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]<\/em><\/p>\n

This list is in string format, so I converted it like this:<\/p>\n

\r\nfinal events = await _jobsServices.getEvents(); final eventsConvert = events .map((date) => (DateTime.parse(date.dataDoJob))) .toList(); eventsList.assignAll(eventsConvert);\r\n<\/pre>\n
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.<\/p>\n
On my calendar widget, I put it like this:<\/p>\n
\r\nTableCalendar(\r\n              eventLoader: (day) => controller.eventsList, \/\/THIS IS THE EVENTS\r\n              calendarBuilders: const CalendarBuilders(),\r\n              focusedDay: controller.focusedDay.value,\r\n              firstDay: DateTime(2019),\r\n              lastDay: DateTime(2050),\r\n              headerStyle:\r\n                  const HeaderStyle(formatButtonVisible: false), \/\/WEEK VISIBLE\r\n              locale: 'pt_BR',\r\n              daysOfWeekVisible: true,\r\n              calendarFormat: controller.format.value,\r\n              onFormatChanged: (CalendarFormat _format) =>\r\n                  controller.calendarFormat(_format),\r\n              onDaySelected: (DateTime userSelectedDay, DateTime focusedDay) =>\r\n                  controller.selectedDay(userSelectedDay, focusedDay),\r\n              calendarStyle: CalendarStyle(\r\n                  selectedTextStyle: const TextStyle(color: Colors.white),\r\n                  isTodayHighlighted: true,\r\n                  selectedDecoration: BoxDecoration(\r\n                      color: context.buttomThemeClicled,\r\n                      shape: BoxShape.circle)),\r\n              selectedDayPredicate: (DateTime date) {\r\n                return isSameDay(controller.focusedDay.value, date);\r\n              },\r\n            );\r\n<\/pre>\n
Fix Showing Events Dots on Every Date for Table Calendar<\/h2>\n
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).<\/p>\n
eventLoader: (day) => controller.eventsList, \/\/ controller.eventsList is a List<\/p>\n
eventLoader expects a function that returns a list of events only for the specific<\/strong> day passed in, but you’re returning the entire list of events every time<\/strong>, regardless of the day.<\/p>\n
Solution:<\/h3>\n
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.<\/p>\n
Note:<\/strong> In this example, the API response is mocked as a List for demonstration purposes.<\/p>\n
\r\nclass _CalendarScreenState extends State {\r\n late final Map> _eventsMap;\r\n final DateTime _focusedDay = DateTime(2021, 11, 10);\r\n final DateTime _selectedDay = DateTime(2021, 11, 10);\r\n\r\n final List apiDates = [\r\n   '2021-07-11 00:00:00.000',\r\n   '2021-07-25 00:00:00.000',\r\n   '2021-07-26 00:00:00.000',\r\n   '2021-07-27 00:00:00.000',\r\n   '2021-09-01 00:00:00.000',\r\n   '2021-09-01 00:00:00.000',\r\n   '2021-09-03 00:00:00.000',\r\n   '2021-09-03 00:00:00.000',\r\n   '2021-09-22 00:00:00.000',\r\n   '2021-09-24 00:00:00.000',\r\n   '2021-10-18 00:00:00.000',\r\n   '2021-10-21 00:00:00.000',\r\n   '2021-11-10 00:00:00.000',\r\n   '2021-11-15 00:00:00.000',\r\n   '2021-11-15 00:00:00.000',\r\n ];\r\n @override\r\n void initState() {\r\n   super.initState();\r\n   _eventsMap = _convertEvents(apiDates);\r\n }\r\n Map> _convertEvents(List eventStrings) {\r\n   final map = >{};\r\n   for (var dateStr in eventStrings) {\r\n     final parsed = DateTime.parse(dateStr);\r\n     final dateOnly = DateTime(parsed.year, parsed.month, parsed.day);\r\n     map.putIfAbsent(dateOnly, () => []).add('Evento');\r\n   }\r\n   return map;\r\n }\r\n @override\r\n Widget build(BuildContext context) {\r\n   return Scaffold(\r\n     appBar: AppBar(title: const Text('Table Calendar Example')),\r\n     body: Padding(\r\n       padding: const EdgeInsets.all(16.0),\r\n       child: TableCalendar(\r\n         locale: 'pt_BR',\r\n         focusedDay: _focusedDay,\r\n         firstDay: DateTime(2019),\r\n         lastDay: DateTime(2050),\r\n         startingDayOfWeek: StartingDayOfWeek.monday,\r\n         calendarFormat: CalendarFormat.month,\r\n         headerStyle: const HeaderStyle(formatButtonVisible: false),\r\n         calendarStyle: const CalendarStyle(\r\n           selectedDecoration: BoxDecoration(\r\n             color: Colors.orange,\r\n             shape: BoxShape.circle,\r\n           ),\r\n           todayDecoration: BoxDecoration(\r\n             color: Colors.blueAccent,\r\n             shape: BoxShape.circle,\r\n           ),\r\n         ),\r\n         selectedDayPredicate: (day) => isSameDay(day, _selectedDay),\r\n         eventLoader: (day) {\r\n           final dateOnly = DateTime(day.year, day.month, day.day);\r\n           return _eventsMap[dateOnly] ?? [];\r\n         },\r\n         onDaySelected: (selectedDay, focusedDay) {\r\n           print('Selected: $selectedDay');\r\n         },\r\n       ),\r\n     ),\r\n   );\r\n }\r\n}\r\n<\/pre>\n
Screenshot:<\/h3>\n
\"cal-output\"<\/p>\n
\"Also
<\/p>
Also Read:<\/h3>Flutter BLoC Tutorial<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":12720,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-12719","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12719"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12719"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12719\/revisions"}],"predecessor-version":[{"id":12723,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12719\/revisions\/12723"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12720"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}