How do I put an image in the sfcalendar date field?

Question

I'm making an app using sfcalendar and flutter. I want to put an image inside a calendar date field.

I want to make it like this image. This is image link I want to put an image on January 11 like this picture.

This is the sfcalendar code.

body: SfCalendar(
  view: CalendarView.month,
  dataSource: MeetingDataSource(_getDataSource()),
  monthViewSettings: MonthViewSettings(
     appointmentDisplayMode: MonthAppointmentDisplayMode.appointment),
),

And this is the data source code.

class MeetingDataSource extends CalendarDataSource {
  MeetingDataSource(List<Meeting> source) {
    appointments = source;
  }

  @override
  DateTime getStartTime(int index) {
    return appointments![index].from;
  }

  @override
  DateTime getEndTime(int index) {
    return appointments![index].to;
  }

  @override
  String getSubject(int index) {
    return appointments![index].eventName;
  }

  @override
  Color getColor(int index) {
    return appointments![index].background;
  }

  @override
  bool isAllDay(int index) {
    return appointments![index].isAllDay;
  }
}

class Meeting {
  Meeting(this.eventName, this.from, this.to, this.background, this.isAllDay);

  String eventName;
  DateTime from;
  DateTime to;
  Color background;
  bool isAllDay;
}
List<Meeting> _getDataSource() {
  final List<Meeting> meetings = <Meeting>[];
  final DateTime today = DateTime.now();
  final DateTime startTime = DateTime.parse('2023-01-01 00:00:00.000');
  final DateTime endTime = startTime.add(const Duration(hours: 2));
  meetings.add(Meeting(
       'Happy new year!', startTime, endTime, const Color(0xFF0F8644), false));
  return meetings;
}

I've been looking on various sites for how to put an image inside the sfcalendar date field, but I couldn't find it. For reference, the image name is 'Penguin.png'. Please help me!

Answer 1

• Customize the view for monthCellBuilder

 return Scaffold(
      body: SafeArea(
        child: SfCalendar(
          view: CalendarView.month,
          monthCellBuilder: (context, details) {
            return Column(
              children: [
                Text(
                  details.date.day.toString(),
                ),
                details.date.day == DateTime.now().day
                    ? Icon(Icons.people)
                    : SizedBox()
              ],
            );
          },
          dataSource: MeetingDataSource(_getDataSource()),
          monthViewSettings: MonthViewSettings(
              appointmentDisplayMode: MonthAppointmentDisplayMode.appointment),
        ),
      ),
    );