backgroundColor property

Color? backgroundColor

The background color to fill the background of the SfCalendar month cell.

Defaults to null.

Using a SfCalendarTheme gives more fine-grained control over the appearance of various components of the calendar.

See also:

• todayBackgroundColor, which used to fill the background of the today date month cell in the calendar.
• trailingDatesBackgroundColor, which fills the background of the trailing dates cells of month view in calendar.
• leadingDatesBackgroundColor, which fills the background of the leading dates cells of month view in calendar.
• textStyle, which used to customize the text style of texts in month cell in month view of calendar.
• 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
• Knowledge base: How to customize the leading and trailing dates

Widget build(BuildContext context) {
   return Container(
     child: SfCalendar(
       view: CalendarView.month,
       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)),
     ),
   );
 }

Implementation

final Color? backgroundColor;