diff --git a/README.md b/README.md index 3793694..bcef558 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,71 @@ -# month-cell-customization-date-range-picker-flutter -How to customize the month cells in Flutter date range picker (SfDateRangePicker)? +# How to customize the month cell of the Flutter date range picker (SfDateRangePicker)? + +In the flutter date range picker, you can customize the month cells by using the `specialDates`, `blackoutDates`, and `showTrailingAndLeadingDates` properties. + +## Step 1: +In initState(), set the default dates for special, blackout dates, and set the default color values for the weekend days, special dates, current date, blackout dates, leading and trailing dates. + +```xml +DateRangePickerController _controller; +List _blackoutDates; +List _specialDates; +Color weekEndColor, + specialDatesColor, + todayColor, + leadingTrailingDatesColor, + blackoutDatesColor; + +@override +void initState() { + // TODO: implement initState + _controller = DateRangePickerController(); + _blackoutDates = _getBlackoutDates(); + _specialDates = _getSpecialDates(); + weekEndColor = Color(0xFF0e9aa7); + leadingTrailingDatesColor = Color(0xFF88d8b0); + specialDatesColor = Color(0xFFf6cd61); + todayColor = Color(0xFFff6f69); + blackoutDatesColor = Colors.black; + super.initState(); +} +``` + + +## Step 2: +Place the calendar inside the body of the Scaffold widget. Using the `TextStyle` and `BoxDecoration` widget you can customize the dates with shapes and colors. In the same way, you can also customize the blackout dates. + +```xml +body: Card( + margin: const EdgeInsets.fromLTRB(40, 150, 40, 150), + child: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: DateRangePickerMonthViewSettings( + specialDates: _specialDates, + showTrailingAndLeadingDates: true, + blackoutDates: _blackoutDates), + monthCellStyle: DateRangePickerMonthCellStyle( + blackoutDateTextStyle: TextStyle( + color: blackoutDatesColor, + decoration: TextDecoration.lineThrough), + specialDatesDecoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.all(width: 1), + color: specialDatesColor), + specialDatesTextStyle: TextStyle(color: Colors.black), + cellDecoration: BoxDecoration(shape: BoxShape.circle), + selectionColor: Color(0xFFf8dbdff), + todayTextStyle: TextStyle(color: Colors.white), + todayCellDecoration: + BoxDecoration(shape: BoxShape.circle, color: todayColor), + weekendDatesDecoration: BoxDecoration( + color: weekEndColor, + border: Border.all(width: 1), + shape: BoxShape.circle), + trailingDatesDecoration: BoxDecoration( + shape: BoxShape.rectangle, color: leadingTrailingDatesColor), + leadingDatesDecoration: BoxDecoration( + shape: BoxShape.rectangle, color: leadingTrailingDatesColor)), + todayHighlightColor: Colors.orange, + ), +)); +```