Category / Section
How to customize the special dates using builder in the Flutter Date Range Picker
1 min read
You can customize the specialDates cell by using cellBuilder in the Flutter date picker.
In initState(), set the default values for picker with special dates.
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();
}
_specialDates assigned to specialDates property of the DateRangePickerMonthViewSettings.
child: SfDateRangePicker( selectionMode: DateRangePickerSelectionMode.single, monthViewSettings: DateRangePickerMonthViewSettings(specialDates: _specialDates), cellBuilder: cellBuilder, )),
isSpecialDate checks whether the visible date is special date or not, if it is special date then show that cell with Text with Icon widget.
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;
}
