Customize appointment field colors

Here the hex code #F12828 and Color of the Dates border Black Color i want all that blue hover gone

and the other pick date hex code #F12828 a

here my jotform link https://www.jotform.com/build/241115876176157

Hi Simmons_Lashay,

Thanks for reaching out to Jotform Support. I’m sorry you're having difficulties with this. Yes, we can change the colors and also remove the blue hover on the background by setting in the advanced designer. And as for the other pick date, hex code, you just need to inject this CSS code here:

}



#input_63 div.selectedDate {



}



#input_63 div.appointmentCalendarDays {

  color : #F12828;

}



#input_63 div.appointmentSlotsContainer {



}



#id_63 {

  background-color : #efecec;

  border-bottom : 0px none #f4f4f4;

  background-color : #f12828  !important;

}

1. Open your form in Form Builder and click the blue Paint Roller icon on the right side of the page.

1. Click on Advanced Designer in the menu on the right.

In Advanced Designer, you can use button templates to change the color of the buttons. Let me show you how:

1. Click on the appointment properties, and then double-click them until the border selects just this property.
2. Select CSS on the upper-right side.
3. Select the border button in the CSS helper.
4. Lastly, click on Save in the upper left corner.

Check out my results in the screencast below:

Give it a try, and let us know if you need any other help.

Hi can you make the background white instead of red and change the green border to black and change the pick date to red

Hi Lashay,

Thanks for getting back to us. I see you already managed to make the background to white. To make the pick date border to black and pick date background color to red, you can inject the below CSS Code to your form:

/* Appointment: Change active date border to black and background color to red -#14111401 */

.calendarDay.isActive {

  background-color: black;

}



.calendarDay.isActive> span {

  background-color: red ! important;

}

/* Code ends here */

Here's the expected result:

Here's also a link to a cloned version of your form that you can test.

Let us know if you need any more help.

my year picker on my appoint ment calendar is is white out

here jotfomr link https://www.jotform.com/build/241115876176157#preview

Hi Lashay,

Thanks for getting back to us, and I'm very sorry to hear that. You can inject the below CSS Code to change the year's font color:

/* Appointment: Change year picker font color to black -#14111401 */

#input_63 select.pickerYear {

  color: black ! important;

}

/* Code ends here */

Here's the expected result

Give it a try and let us know if you need any more help.