Customizations in Flutter DateRangePicker (SfDateRangePicker)

Month cell customization

You can customize the calendar month view by using the monthCellStyle of SfDateRangePicker.

Current month dates – You can customize the current month date’s text style and background of the DateRangePicker by using the textStyle and cellDecoration properties of DateRangePickerMonthCellStyle

Today date – You can customize the today date text style and background of the DateRangePicker by using the todayTextStyle and todayCellDecoration.

Leading dates – You can hide the leading dates by using the showTrailingAndLeadingDates property in the DateRangePickerMonthViewSettings class. You can also customize the leading month dates text style and background of the DateRangePicker by using the leadingDatesTextStyle and leadingDatesDecoration.

Trailing dates - You can hide the trailing dates by using showTrailingAndLeadingDates dates property in DateRangePickerMonthViewSettings class. You can also customize the trailing month dates text style and background of the DateRangePicker by using the trailingDatesTextStyle and trailingDatesDecoration.

Blackout Dates - You can customize the blackout dates text style and background of the DateRangePicker by using the blackoutDateTextStyle and blackoutDatesDecoration.

Disabled dates – Disable dates text style and background beyond of the minDate and maxDate in DateRangePicker by using disableDatesTextStyle and disableDatesDecoration.

Special Dates – You can add special dates to the DateRangePicker by using specialDates property, and you can also customize the special dates text style and background by using the specialDatesTextStyle and specialDatesDecoration.

Weekend Dates – You can change weekend dates to DateRangePicker by using the weekendDays property, and you can also customize the weekend dates text style and background by using the weekendDatesTextStyle and weekendDatesDecoration.

@override
Widget build(BuildContext context) {
   return Scaffold(
       body: SfDateRangePicker(
       view: DateRangePickerView.month,
       monthViewSettings:DateRangePickerMonthViewSettings(blackoutDates:List<DateTime>()
           ..add(DateTime(2020, 03, 26)),
      weekendDays: List<int>()
           ..add(7)..add(6),
      specialDates:List<DateTime>()
           ..add(DateTime(2020, 03, 20))..add(DateTime(2020, 03, 16))..add(DateTime(2020,03,17)),showTrailingAndLeadingDates: true),
      monthCellStyle: DateRangePickerMonthCellStyle(
         blackoutDatesDecoration: BoxDecoration(
               color: Colors.red,
               border: Border.all(color: const Color(0xFFF44436), width: 1),
               shape: BoxShape.circle),
        weekendDatesDecoration: BoxDecoration(
              color: const Color(0xFFDFDFDF),
              border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
              shape: BoxShape.circle),
       specialDatesDecoration: BoxDecoration(
              color: Colors.green,
              border: Border.all(color: const Color(0xFF2B732F), width: 1),
              shape: BoxShape.circle),
       blackoutDateTextStyle: TextStyle(color: Colors.white, decoration: TextDecoration.lineThrough),
      specialDatesTextStyle: const TextStyle(color: Colors.white),
      ),
    )
  );
}

Customizations Date Range Picker

Month format

You can customize the month format of the DateRangePicker using the monthFormat property.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfDateRangePicker(
      view: DateRangePickerView.month,
      monthFormat: 'MMM',
    ),
  );
}

Month cell customization Date Range Picker

Selection cell customization

You can also customize the date range picker section by using the monthCellStyle of SfDateRangePicker.

Selection date text style – Selected date text style can be customized using the selectionTextStyle property of SfDateRangePicker that is applicable for selectionMode is single and multiple, it is also applicable to start and end of the selected range text style in the single and multi-range selection.

Selection color – Selected date background color can be customized using the selectionColor property of SfDateRangePicker that is applicable for single and multiple selections.

Range selection text style – Range selection date text style can be customized using the rangeTextStyle property that is applicable when selectionMode is range or multi-range.

Range selection color - Range selection color text style can be customized using the startRangeSelectionColor, endRangeSelectionColor , rangeSelectionColor properties that is applicable when selectionMode is in range or multi-range.

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SfDateRangePicker(
      view: DateRangePickerView.month,
      selectionMode: DateRangePickerSelectionMode.range,
      selectionTextStyle: const TextStyle(color: Colors.white),
      selectionColor: Colors.blue,
      startRangeSelectionColor: Colors.purple,
      endRangeSelectionColor: Colors.purple,
      rangeSelectionColor: Colors.purpleAccent,
      rangeTextStyle: const TextStyle(color: Colors.white, fontSize: 20),
    ));
  }

Month Selection cell customization Date Range Picker

Year cell customization

You can customize the calendar year, decade, and century view by using the yearCellStyle of SfDateRangePicker.

Current year – You can customize current month dates text style and background of the DateRangePicker by using the textStyle and cellDecoration properties of DateRangePickerYearCellStyle

Disabled dates – Disable dates text style and background beyond of the DateRangePicker by using the disableDatesTextStyle and disableDatesDecoration.

Leading dates – You can also customize the leading month dates text style and background of the DateRangePicker by using the leadingDatesTextStyle and leadingDatesDecoration.

Today date – You can customize the today date text style and background of the DateRangePicker by using the todayTextStyle and todayCellDecoration.

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: SfDateRangePicker(
        view: DateRangePickerView.month,
        selectionMode: DateRangePickerSelectionMode.range,
        yearCellStyle: DateRangePickerYearCellStyle(
            disabledDatesDecoration:BoxDecoration(
                   color: const Color(0xFFDFDFDF),
                   border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
                   shape: BoxShape.circle),
            disabledDatesTextStyle: const TextStyle(color: Colors.black),
            leadingDatesDecoration:BoxDecoration(
                   color: const Color(0xFFDFDFDF),
                   border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
                   shape: BoxShape.circle),
            leadingDatesTextStyle: const TextStyle(color: Colors.black),
            textStyle: const TextStyle(color: Colors.blue),
            todayCellDecoration: BoxDecoration(
                   color: const Color(0xFFDFDFDF),
                   border: Border.all(color: const Color(0xFFB6B6B6), width: 1),
                   shape: BoxShape.circle),
           todayTextStyle: const TextStyle(color: Colors.purple),
           )
         ),
     );
}

Year cell customization Date Range Picker

See also

How to customize the month cell of the Flutter date range picker (SfDateRangePicker)?