top of page

[Flutter/dart] How to display an icon on the calendar along with the date


When making an app, I think there are many occasions when you use a calendar. Even so, you may want to display the icon image along with the date on the calendar. For example, you can record the study time of the day, display a picture of the date partner, and so on.

There are many libraries that display calendars in flutter, but the one that can display dates and other elements is flutter_calendar_carousel. This time, I will introduce how to use flutter_calendar_carousel.

How to use

First, install the library. Add the following to pubsec.yaml.

  flutter_calendar_carousel: ^1.5.1

Also, import as follows at the beginning of the module to be used.

import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart';
import 'package:flutter_calendar_carousel/classes/event.dart';


First, I will show you the whole picture. (StatefulWidget State build () method)

Widget build(BuildContext context) {

  List<DateTime> _days=[DateTime(2020, 12, 20), DateTime(2020, 12, 21)]; //Date to display the icon

  return Scaffold(
    appBar: AppBar(

      title: Text(widget.title),
    body: Container(
        margin: const EdgeInsets.only(top:20, left:20),
        //from here
        child: CalendarCarousel<Event>(
          //List of Events of the date to display the icon
          markedDatesMap: _getMarkedDateMap(_days, context),
          markedDateShowIcon: true,
          markedDateIconMaxShown: 1,
          markedDateMoreShowTotal: null,
          markedDateIconBuilder: (event)=>event.icon,  //icon

Event is a class that collects dates and icons.

class Event implements EventInterface {
  final DateTime date;
  final String title;
  final Widget icon;
  final Widget dot;

Pass the List of Event to the markedDateMap: property and display the icon registered in Event with markedDateIconBulder :.

Creating an Event List

_getMarkedDateMap () creates a List of Events from a List of dates to display the icon.

  EventList<Event> _getMarkedDateMap(List<DateTime> days, BuildContext context){
    EventList<Event> _markedDateMap=new EventList<Event>(events: {});
    for (DateTime _date in days){
          new Event(
            date: _date,
            icon: _getIcon(_date), //create icon
    return _markedDateMap;

For each date, create a date and an icon associated with the date in the Event constructor.

Creating a date-linked icon

_GetIcon () is a method to create an icon that takes a date as an argument and displays it.

One thing to keep in mind here is that you need to explicitly display the date letters as well as the icons. (It seems that it will be overwritten when the icon is displayed)

Widget _getIcon(DateTime date){

  bool _isToday=isSameDay(date,; //is today?
  CalendarCarousel _calendar_default=CalendarCarousel(); 
  Color _today_col=_calendar_default.todayButtonColor;  
  //today's background

  return Container(
      decoration: new BoxDecoration(
        color: _isToday ? _today_col :     Theme.of(context).scaffoldBackgroundColor,
        borderRadius: BorderRadius.circular(1000),
      ), //In the case of today, the background of the red circle and 
         //nothing if else
      child: Column(
          children: [
              style: TextStyle(
                  color: _isToday? Colors.white: getDayCol(date),
                  fontWeight: FontWeight.w400
              ), //Date letters: White today, black on weekdays, 
                  //red on holidays
            SizedBox(height: 2,),
              size: 16,
            ), //Icon to display with date


First of all, in today's case the background is a red circle. Also, the color of the date should be white if it is today, black on weekdays, and red on holidays. (It seems that these settings will disappear when you overwrite them with the icon)

The Icon () part is the main subject, the icon you want to display with the date. Please replace as appropriate.

The following method is used to determine if the given date is today.

static bool isSameDay(DateTime day1, DateTime day2) {
  return ((day1.difference(day2).inDays) == 0 && ( ==;

It also uses a method that determines if a given date is a weekday or a holiday and returns the corresponding text color. (Holidays are not supported, so please add if necessary)

Color getDayCol(DateTime _date){
    case DateTime.saturday:
    case DateTime.sunday:

The following calendar will be displayed.


Please note that you cannot display too large widgets. Also, it is quite troublesome to have to reset the settings for date characters.

Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha


Let's do our best with our partner:​ ChatReminder


It is an application that achieves goals in a chat format with partners.


Let's do our best with our partner:​ ChatReminder


It is an application that achieves goals in a chat format with partners.


Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

bottom of page