Builders in flutter calendar

The calendar allows you to create a responsive UI with conditions based on a widget’s details, to design and create your custom view to the month cells and month header of schedule view in the calendar.

The calendar has two builders to create and assign your custom view:
*. Month cell builder
*. Schedule view month header builder

Month cell builder

The MonthCellBuilder allows you to design your custom view and assign the view to the month cells of the calendar by returning an appropriate widget in the monthCellBuilder of SfCalendar.

MonthCellDetails - returns the details of the month cell.

date - returns the month cell date.
appointments - returns the month cell appointments.
visibleDates - returns the current view visible dates.
bounds - returns the month cell bounds.

dart

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
        body: SfCalendar(
            view: CalendarView.month,
            monthCellBuilder:
                (BuildContext buildContext, MonthCellDetails details) {
              final Color backgroundColor =
              _getMonthCellBackgroundColor(details.date);
              final Color defaultColor = model.themeData != null &&
                  model.themeData.brightness == Brightness.dark
                  ? Colors.black54
                  : Colors.white;
              return Container(
                decoration: BoxDecoration(
                    color: backgroundColor,
                    border: Border.all(color: defaultColor, width: 0.5)),
                child: Center(
                  child: Text(
                    details.date.day.toString(),
                    style: TextStyle(
                        color: _getCellTextColor(backgroundColor)),
                  ),
                ),
              );
            },
            showDatePickerButton: true,
            monthViewSettings: MonthViewSettings(
              showTrailingAndLeadingDates: false,
            )),
    ),
  );
}

Schedule view month header builder

You can design your custom view and assign this view to the month header of a schedule view in the calendar by returning an appropriate widget using the scheduleViewMonthHeaderBuilder in the SfCalendar.

ScheduleViewMonthHeaderDetails - returns the required details of the schedule view month header.

date - returns the header date.
bounds - returns the header bounds.

dart

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: SfCalendar(
          view: CalendarView.schedule,
          dataSource: _calendarDataSource,
          scheduleViewMonthHeaderBuilder: (BuildContext buildContext,
              ScheduleViewMonthHeaderDetails details) {
            final String monthName = _getMonthDate(details.date.month);
            return Stack(
              children: [
                Image(
                    image: ExactAssetImage('images/' + monthName + '.png'),
                    fit: BoxFit.cover,
                    width: details.bounds.width,
                    height: details.bounds.height),
                Positioned(
                  left: 55,
                  right: 0,
                  top: 20,
                  bottom: 0,
                  child: Text(
                    monthName + ' ' + details.date.year.toString(),
                    style: TextStyle(fontSize: 18),
                  ),
                )
              ],
            );
          },
          showDatePickerButton: true),
    ),
  );
}