Set leading and trailing month cells using cellBuilder

[Aaron]

Hi, I'm building out a custom dateRangePicker to emulate the look and feel of the Event Calendar (as the event calendar doesn't support dragging a range of dates). 
I'm using cellBuilder to create custom styling for the day cells within the month view, but can't work out how to define the leading or trailing months so that I can make these light grey as opposed to black numbers.

So far I've tried to set a boolean of isLeading and isTrailing with an int like (cellDetails.date.month + 1), but this doesn't really appear to be the correct way to go about it. Are the leading/trailing dates exposed? Or do I need to construct a function to calculate these cells?

[Indumathi Ravichandran]

Hi Aaron, 

 

Thank you for contacting Syncfusion support. 

 

Regarding Query: so that I can make these light grey as opposed to black numbers. 

 

Based on the shared information, we have checked and your requirement is “Style the leading and trailing dates using the cellBuilder of the SfDateRangePicker” and your requirement can be achieved by using  the month of the middle date. We have prepared the simple sample for the same. Please find the sample from the following link. Also please find the code snippet for the same. 

 

Sample link: 

https://www.syncfusion.com/downloads/support/forum/166373/ze/Picker1781535311.zip 

 

Code snippet: 

 

child: SfDateRangePicker(
    monthViewSettings: DateRangePickerMonthViewSettings(
        showTrailingAndLeadingDates: true),
    cellBuilder:
        (BuildContext context, DateRangePickerCellDetails details) {
      int midMonth = details
          .visibleDates[details.visibleDates.length ~/ 2].month;
      if (details.date.month != midMonth) {
        return Container(
            child: Text(
          DateFormat('dd').format(details.date),
          style: TextStyle(color: Colors.grey),
        ));
      } else {
        return Container(
            child: Text(DateFormat('dd').format(details.date)));
      }
    })), 

 

 

Screenshot: 

 

 

We hope that this helps you. Please let us know if you need further assistance. 

 

Regards, 

Indumathi R 

[Aaron]

Thank you so much, the line:

details.visibleDates[details.visibleDates.length ~/ 2].month;

 was the secret sauce which I needed! It works perfectly, thanks!

[Indumathi Ravichandran]

Hi Aaron, 

 

Thank you for the update. Please get in touch with us if you would require any further assistance. 

 

Regards, 

Indumathi R