Change color of weekends on DatePicker

Hi,

Is there any way to make the weekend dates on an IgxDatePicker control not be the color grey?  I have a lot of dates disabled which all show up grey but even when I enable a Saturday or Sunday date those dates stay grey and look disabled even though they are selectable.

Here's an example:

Hello User42,

Thank you for your post on this matter. I am currently looking into a way for the IgxDatePicker control’s non-disabled dates to be colored normally. From the screenshot you have provided, though, it appears that most of the dates in your component are greyed out, unless selected. This leads me to believe that you are likely setting the IgxDatePicker up in a different way than I have it locally, and so would it be possible for you to please provide any typescript or HTML setup that you are currently using so I may mimic the scenario you have on my end as well?

Please let me know if you have any other questions or concerns on this matter.

Sure, I'm using the following code to set the disabled dates;

 var endDate: Date = new Date(EndDate);
    endDate.setHours(0, 0, 0, 0);

    var startDate = new Date();
    startDate.setHours(0, 0, 0, 0);
    
    endDate.setDate(endDate.getDate() - 1);
    this.datePicker.disabledDates = [
      { type: DateRangeType.Before, dateRange: [startDate] },
      { type: DateRangeType.After, dateRange: [endDate]}
    ]

The idea is to disable all dates that are before today and later than 1 day before the passed in end date.

What I was trying to illustrate in my image is that the 27th is enabled according to my logic, and verified enabled by being able to select it but the 20th is disabled, which it should be due to my logic. Every other day is disabled except for the 26th and 27th which is the expected behavior.

As I stated originally though, the 26th and the 27th are styled exactly the same, and the same as all other disabled dates, even though the 27th is enabled.

Hello,

The idea behind disabled dates is to have a faded background that indicated inactive state, and the only way to make them distinguishable is by using the $date-disabled-text-color parameter.

In general it depends on the user configuration how the day elements will look like, and we provide a rich way to do so. I believe you will find this sample helpful. It shows how to set different element colors which makes the day element more distinctive.