Display number of events in TableCalendar Flutter

Question

TableCalendar package have an gif example of calendar with number of events for given day in bottom right corner of a day.

I've been going through their documentation, but haven't been able to find the solution.

I've learned that those dots are called markers, and found MarkerBuilder, but I don't know how to implement it in my code.

How do I achieve this?

Answer 1

You can overwrite the markerbuilder function with your own. Something like:

TableCalendar(
   ...
   calendarStyle: const CalendarStyle(
      markersAlignment: Alignment.bottomRight,
   ),
   calendarBuilders: CalendarBuilders(
      markerBuilder: (context, day, events) => events.isNotEmpty
                ? Container(
                    width: 24,
                    height: 24,
                    alignment: Alignment.center,
                    decoration: const BoxDecoration(
                      color: Colors.lightBlue,
                    ),
                    child: Text(
                      '${events.length}',
                      style: const TextStyle(color: Colors.white),
                    ),
                  )
                : null,
   )

)

You can put pretty much anything you like there, as its just another widget.