yearCellStyle property

DateRangePickerYearCellStyle yearCellStyle

The style have properties which allow to customize the year, decade and century view of the SfDateRangePicker.

Allows to customize the DateRangePickerYearCellStyle.textStyle, DateRangePickerYearCellStyle.todayTextStyle, DateRangePickerYearCellStyle.leadingDatesTextStyle, DateRangePickerYearCellStyle.disabledDatesTextStyle, DateRangePickerYearCellStyle.cellDecoration, DateRangePickerYearCellStyle.todayCellDecoration, DateRangePickerYearCellStyle.leadingDatesDecoration and DateRangePickerYearCellStyle.disabledDatesDecoration in year, decade and century view of the date range picker.

See also:

• DateRangePickerYearCellStyle, to know more about available options to customize the year cells of date range picker
• monthCellStyle, which allows to customize the month cell of the month view of the date range picker
• cellBuilder, which allows to set custom widget for the picker cells in the date range picker.
• monthViewSettings, which allows to customize the month view of the date range picker.
• selectionColor, which fills the background of the selected cells in the date range picker.
• startRangeSelectionColor, which fills the background of the first cell of the range selection in date range picker.
• endRangeSelectionColor, which fills the background of the last cell of the range selection in date range picker.
• rangeSelectionColor, which fills the background of the in between cells of date range picker in range selection.
• selectionTextStyle, which is used to set the text style for the text in the selected cell of date range picker.
• rangeTextStyle, which is used to set text style for the text in the selected range cell's of date range picker.
• backgroundColor, which fills the background of the date range picker.
• todayHighlightColor, which highlights the today date cell in the date range picker.
• Knowledge base: How to customize leading and trailing dates using cell builder
• Knowledge base: How to select all days when clicking on the day header
• Knowledge base: How to customize the date range picker cells using builder
• Knowledge base: How to apply theming
• Knowledge base: How to style the year, decade and century views

Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       body: SfDateRangePicker(
         view: DateRangePickerView.decade,
         enablePastDates: false,
         yearCellStyle: DateRangePickerYearCellStyle(
           textStyle: TextStyle(
               fontWeight: FontWeight.w400, fontSize: 15,
                    color: Colors.black),
           todayTextStyle: TextStyle(
               fontStyle: FontStyle.italic,
               fontSize: 15,
               fontWeight: FontWeight.w500,
               color: Colors.red),
           leadingDatesDecoration: BoxDecoration(
               color: const Color(0xFFDFDFDF),
               border: Border.all(color: const Color(0xFFB6B6B6),
                    width: 1),
               shape: BoxShape.circle),
           disabledDatesDecoration: BoxDecoration(
               color: const Color(0xFFDFDFDF).withOpacity(0.2),
               border: Border.all(color: const Color(0xFFB6B6B6),
                    width: 1),
               shape: BoxShape.circle),
         ),
       ),
     ),
   );
 }

Implementation

final DateRangePickerYearCellStyle yearCellStyle;