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(), )
|
