cellDecoration property
The decoration for the month cells of SfDateRangePicker month view.
Defaults to null.
Using a SfDateRangePickerTheme
gives more fine-grained control over the
appearance of various components of the date range picker.
See also:
- textStyle, which used to set text style for the month cells in the month view of the date range picker.
- disabledDatesDecoration, which used to set decoration for the disabled date cells in the month view of the date range picker.
- trailingDatesDecoration, which used to set the decoration for the trailing dates cells in the month view of the date range picker.
- todayCellDecoration, which used to set the decoration for the today date cell in the month view of the date range picker.
- leadingDatesDecoration, which used to set the decoration for the leading date cells in the month view of the date range picker.
- blackoutDatesDecoration, which used to set the decoration for the blackout date cells in the month view of date range picker.
- specialDatesDecoration, which used to set the decoration for the special date cells in the month view of date range picker.
- weekendDatesDecoration, which used to set decoration for the weekend date cells in the month view of date range picker.
- SfDateRangePicker.selectionTextStyle, which is used to set the text style for the text in the selected cell of date range picker.
- SfDateRangePicker.rangeTextStyle, which is used to set text style for the text in the selected range cell's of date range picker.
- Knowledge base: How to customize leading and trailing dates using cell builder
- Knowledge base: How to customize the special dates using builder
- Knowledge base: How to customize the date range picker cells using builder
- Knowledge base: How to apply theming
- Knowledge base: How to style the current month date cell
- Knowledge base: How to customize the month cell
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SfDateRangePicker(
controller: _pickerController,
view: DateRangePickerView.month,
enablePastDates: false,
selectionMode: DateRangePickerSelectionMode.multiRange,
monthCellStyle: DateRangePickerMonthCellStyle(
cellDecoration: BoxDecoration(
color: Colors.blueGrey.withOpacity(0.4),
border: Border.all(color: const Color(0xFF2B732F),
width: 1),
shape: BoxShape.circle),
),
),
),
);
}
Implementation
final Decoration? cellDecoration;