syncfusion_flutter_datepicker calendar display messed up

Question

i am using date range picker for quite a time now but since 2-3 days i am facing a very strange issue regardless of the version I change. Even if i add the very basic code from your site -

Positioned( left: 20, top: 50, right: 20, bottom: 50, child: Container( color: Colors.white, height: screenWidth/2, width: screenWidth/2, child: Center( child: SfDateRangePicker( onSelectionChanged: _onSelectionChanged, selectionMode: DateRangePickerSelectionMode.range, initialSelectedRange: PickerDateRange( DateTime.now().subtract(const Duration(days: 4)), DateTime.now().add(const Duration(days: 3))), ), ), ), ),

i am getting calendrer like this either using directly or in container. enter image description here

Please let me know any possible reason and solution for this.

trying to display proper calendar in flutter app.

Answer 1

I had the same issue. I could fix it by implementing my own cellBuilder parameter in the SfDateRangePicker like the following

cellBuilder: (BuildContext context,
    DateRangePickerCellDetails details) {
  
  // box decoration if selected
  BoxDecoration? boxDecoration;
  // set the style of the text accordingly
  var style = _normalTextStyle;

  // All dates before initDate, convert them to grey (not allowed to choose)
  if (isLowerDate(
      details.date, DateTime.now())) {
    style = _greyTextStyle;
  } else if (isSameDate(
      details.date, DateTime.now())) {
    boxDecoration = BoxDecoration(
        border:
            Border.all(color: Colors.blue),
        shape: BoxShape.rectangle);
  }
  return Container(
    margin: const EdgeInsets.all(2),
    padding: const EdgeInsets.only(top: 10),
    decoration: boxDecoration,
    child: Column(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment:
          MainAxisAlignment.spaceAround,
      children: <Widget>[
        Text(details.date.day.toString(),
            style: style)
      ],
    ),
  );
},

where

const _normalTextStyle = TextStyle(color: Color.fromARGB(255, 85, 85, 85));

const _greyTextStyle = TextStyle(color: Colors.grey);

bool isLowerDate(DateTime dt1, DateTime dt2) {
  return ((getDateWithoutTime(dt1).difference(getDateWithoutTime(dt2))).inDays < 0);
}

DateTime getDateWithoutTime(DateTime d) {
  return DateTime(
      d.year, d.month, d.day);
}

You will end up building something not so beautiful like this:

If you want to modify the selected dates shape, border radious, color, etc. to have a nicer view, you will have to go further and create a DateRangePickerController, assign it in the controller parameter, and use this controller to access the selected date cell inside the cellBuilder by checking details.date is equal to _controller.selectedDate and modify the BoxDecoration property of the container accordingly. Don't forget to change the SfDateRangePicker parameter to selectionColor: Colors.transparent, otherwise, when changing the boxDecoration cell of the selected dates in the cellBuilder you will still have the blue squared box over there.

I hope this can help you. Here are some resources about it:

https://help.syncfusion.com/flutter/daterangepicker/builders