Articles in this section
Category / Section

How to customize the leading and trailing dates of the month cells in the Flutter Calendar

1 min read

In the Flutter Event Calendar, you can customize the leading and trailing dates by using the monthCellBuilder property of the Flutter event calendar.

STEP 1: Find out the leading and trailing dates of the Flutter event calendar.

Widget monthCellBuilder(BuildContext context, MonthCellDetails details) {
  var mid=details.visibleDates.length~/2.toInt();
  var midDate=details.visibleDates[0].add(Duration(days: mid));
 
  if(details.date.month != midDate.month){
    return Container(
      color: Colors.pinkAccent,
      child: Text(
        details.date.day.toString(),
      ),
    );
  }
  else
    {
      return Container(
        color: Colors.green,
        child: Text(
          details.date.day.toString(),
        ),
      );
    }
}

STEP 2: Assign the customized widget to the monthCellBuilder property of the calendar.

child: SfCalendar(
  view: CalendarView.month,
  dataSource: _getDataSource(),
  monthCellBuilder: monthCellBuilder,
),

 

View sample in GitHub

 

leadtraildate customization

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied