|
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. DateRangePickerController _controller;
List<DateTime> _blackoutDates;
List<DateTime> _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. 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, ), ));
Screenshot:
|
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
