monthCellStyle property

Sets the style to customize SfCalendar month cells.

Allows to customize the MonthCellStyle.textStyle, MonthCellStyle.trailingDatesTextStyle, MonthCellStyle.leadingDatesTextStyle, MonthCellStyle.backgroundColor, MonthCellStyle.todayBackgroundColor, MonthCellStyle.leadingDatesBackgroundColor and MonthCellStyle.trailingDatesBackgroundColor in month cells of month view in calendar.

Defaults to null.

See more:

agendaStyle, which used to customize the agenda view on month view of calendar.
appointmentDisplayMode, which is used to customize the appointment display mode in month cells of calendar.
SfCalendar.monthCellBuilder, which used to set the custom widget for month cell in calendar.
SfCalendar.blackoutDates, which allows to restrict the interaction for a particular date in month views of calendar.
SfCalendar.blackoutDatesTextStyle, which used to customize the blackout dates text style in the month view of calendar.
SfCalendarTheme, to handle theming with calendar for giving consistent look.
Knowledge base: How to customize the blackout dates
Knowledge base: How to customize the leading and trailing dates
Knowledge base: How to style the month cell
Knowledge base: How to customize the month cell with appointment count
Knowledge base: How to customize the month cell based on the appointment using builder

Widget build(BuildContext context) {
   return Container(
     child: SfCalendar(
       view: CalendarView.month,
       dataSource: _getCalendarDataSource(),
       monthViewSettings: MonthViewSettings(
          dayFormat: 'EEE',
          numberOfWeeksInView: 4,
          appointmentDisplayCount: 2,
          appointmentDisplayMode: MonthAppointmentDisplayMode.appointment,
          showAgenda: false,
          navigationDirection: MonthNavigationDirection.horizontal,
          monthCellStyle
               : MonthCellStyle(textStyle: TextStyle(fontStyle: FontStyle.
          normal, fontSize: 15, color: Colors.black),
               trailingDatesTextStyle: TextStyle(
                   fontStyle: FontStyle.normal,
                   fontSize: 15,
                   color: Colors.black),
               leadingDatesTextStyle: TextStyle(
                   fontStyle: FontStyle.normal,
                   fontSize: 15,
                   color: Colors.black),
               backgroundColor: Colors.red,
               todayBackgroundColor: Colors.blue,
               leadingDatesBackgroundColor: Colors.grey,
               trailingDatesBackgroundColor: Colors.grey)),
     ),
   );
 }

class DataSource extends CalendarDataSource {
 DataSource(List<Appointment> source) {
   appointments = source;
 }
}

 DataSource _getCalendarDataSource() {
   List<Appointment> appointments = <Appointment>[];
   appointments.add(Appointment(
     startTime: DateTime.now(),
     endTime: DateTime.now().add(Duration(hours: 2)),
     isAllDay: true,
     subject: 'Meeting',
     color: Colors.blue,
     startTimeZone: '',
     endTimeZone: '',
   ));

   return DataSource(appointments);
 }

Implementation

MonthViewSettings class