backgroundColor property
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;