Customizations in Flutter Date Range Picker (SfDateRangePicker)

30 Jul 202512 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 SfDateRangePicker 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.

@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