Category / Section
How to customize the special dates using builder in the Flutter Date Range Picker
1 min read
You can customize the appearance of specialDates in the Flutter date picker by using the cellBuilder property.
In the initState() method, define the dates you want to mark as special:
late List<DateTime> _specialDates;
@override
void initState() {
_specialDates = <DateTime>[
DateTime.now().add(Duration(days: 2)),
DateTime.now().add(Duration(days: 3)),
DateTime.now().add(Duration(days: 6)),
DateTime.now().add(Duration(days: 7)),
DateTime.now().add(Duration(days: -2)),
DateTime.now().add(Duration(days: -3)),
DateTime.now().add(Duration(days: -6)),
DateTime.now().add(Duration(days: -7))
];
super.initState();
}
Assign the _specialDates list to specialDates property of the DateRangePickerMonthViewSettings.
child: SfDateRangePicker( selectionMode: DateRangePickerSelectionMode.single, monthViewSettings: DateRangePickerMonthViewSettings(specialDates: _specialDates), cellBuilder: cellBuilder, )),
Create a custom cell builder that checks if a date is special and renders it differently:
Widget cellBuilder(BuildContext context, DateRangePickerCellDetails details) {
DateTime _visibleDates = details.date;
if (isSpecialDate(_visibleDates)) {
return Column(
children: [
Container(
child: Text(
details.date.day.toString(),
textAlign: TextAlign.center,
),
),
Divider(
color: Colors.white,
height: 5,
),
Icon(
Icons.celebration,
size: 13,
color: Colors.red,
),
],
);
} else {
return Container(
child: Text(
details.date.day.toString(),
textAlign: TextAlign.center,
),
);
}
}
bool isSpecialDate(DateTime date) {
for (int j = 0; j < _specialDates.length; j++) {
if (date.year == _specialDates[j].year &&
date.month == _specialDates[j].month &&
date.day == _specialDates[j].day) {
return true;
}
}
return false;
}
