SfDatePicker - do not gray out previous or next month's days in month drop down

[Arthur Butler]

When the month calendar is shown on the SfDatePicker, the days for the previous and next month are grayed out - see attached image for March 2022.  This is problematic for my use case.  For my use case, I want to restrict the user from selecting dates other than those in the range 28 Feb to 11 Mar.  Because 28 Feb is in the previous month, it appears to the user that they cannot select 28 Feb when they really can.

How can I change the appearance of 28 Feb so that it looks like the 1 - 11 Mar values?  A similar issue occurs if the user selects February - there, 1 - 6 Mar need to not look grayed out.

Regards,

Arthur

Attachment: SfDatePicker_6a02eb30.zip

[Berly Christopher]

Hi Arthur, 

  

Greetings from Syncfusion support. 

  

By default, other month date will be displayed with different color compared with week days for differentiating the date values to user in the UI. We can change the appearance of the other month date color by using the below CSS styles.  

  

@using Syncfusion.Blazor.Calendars 

 

<SfDatePicker TValue="DateTime?" Min='@MinDate' Max='@MaxDate' CssClass="e-custom" ></SfDatePicker> 

 

@code { 

    public DateTime MinDate { get; set; } = new DateTime(2021, 02,24); 

    public DateTime MaxDate { get; set; } = new DateTime(2021, 03, 11); 

} 

<style> 

    .e-custom .e-calendar .e-content .e-other-month span.e-day { 

        color: #333; 

    } 

</style> 

 

  

Please find the sample from the below link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DatePicker_169848556030898  

  

 

 

  

Regards, 

Berly B.C 

[Arthur Butler]

Thank you!

[Berly Christopher]

Hi Arthur, 

  

Most welcome. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C