Articles in this section
Category / Section

How to customize the month cell based on the appointment using builder in the Flutter Calendar

1 min read

In the Flutter Event Calendar, you can customize the month cell based on appointments by using the monthCellBuilder property of the calendar.

STEP 1: Use the required widget for cell customization. Here Text widget used to customize the month cell. MonthCellDetails returns the details (date, appointments, visibleDates, bounds) about the cell. Using this, you can get the appointment details of the cell.

Widget monthCellBuildesr(BuildContext context, MonthCellDetails details) {
 
  if (details.appointments.isNotEmpty) {
    Appointment appointment=details.appointments[0];
    return Container(
      color: appointment.color,
      child: Text(appointment.subject),
    );
  }
  return Container(
    color: Colors.blueGrey,
    child: Text(details.date.day.toString()),
  );
}

STEP 2: Assign the widget to the monthCellBuilder property of the Flutter event calendar.

child: SfCalendar(
  view: CalendarView.month,
  monthCellBuilder: monthCellBuilder,
  dataSource: _getCalendarDataSource(),
)

View sample in GitHub

appointment cell customization

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied