CSS: How to Change the Color of Available Dates in the Appointment Picker Field

I have used the "Appointment" element to set up a booking system, however I'm finding it hard to see the available dates vs the non available dates.

I have had a look at CCS script I can enter, however I can't seem to make them work. I was hoping to just make the available dates a bit of a bolder or darker font.

Can you please help?

Hi Wahroonga_Pre, 

Thanks for reaching out to Jotform support. You can easily do this by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

/*Changes the color of the dates from Appointment Picker field - 25844471*/

.calendarDay.isUnavailable {

    color: red !important;

}

.calendarDay[aria-disabled="false"],

.calendarDay.isToday.isActive > *,

.calendarDay.isActive > * {

    color: green !important;

    font-weight: bold;

}

/*Code ends here*/

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

You can change the color in the code according to your preference.

Give it a try and let us know how it goes.