Customizations in Flutter Date Range Picker (SfDateRangePicker)

6 Jun 202311 minutes to read

You can customize the month and year cells, month format, and selection cells in Flutter Date Range Picker (SfDateRangePicker).

Month cell customization

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

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: SfDateRangePicker(
          view: DateRangePickerView.month,
          monthViewSettings:DateRangePickerMonthViewSettings(blackoutDates:[DateTime(2020, 03, 26)],
              weekendDays: [7,6],
              specialDates:[DateTime(2020, 03, 20),DateTime(2020, 03, 16),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

NOTE

  • Based on the given decoration, cell decoration will be rendered in the following order: blackout dates, special dates, disable dates, today date, weekend dates, leading or trailing dates, and dates decoration.

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.

@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

NOTE

  • Based on the given decoration, cell decoration will be rendered in the following order: disable dates, today date, leading or trailing dates, and dates decoration.

See also