Appointment Field: Change hover color.

https://www.loom.com/share/522d1221d48b4734ad1a342853d68e58

Another thing is that the calendar days are yellow (color I want) when im in the editor but when I save and view the live page (https://solar.conversionhero.co/discovery-call) the calendar *days* are black

Hi Ryan,

Thanks for reaching out to Jotform Support. For Appointment Field. You can inject the below CSS Code to your form to change the hover background color of month numbers:

/* Change appointment field calender dates hover background color -#15387281 */

.calendarDay:hover {

  background-color: #32cd32;

}

/* Code ends here */

Also, you can inject the below CSS Code to your form to change the time slots' border and hover color:

/* Change appointment field calendar timeslots border and hover background color -#32cd32 */

.appointmentSlot.slot {

  border-color: #32cd32;

}

.appointmentSlot.slot:hover {

  background-color: #32cd32 ! important;

}

/* Code ends here */

Change the color code to the color you prefer.

Let me show you how to add custom CSS to your form:

1. In the Form Builder, select the paint roller icon in the upper-right corner.
2. In the Form Designer panel on the right, go to Styles at the top.
3. Scroll down to Inject Custom CSS and enter your CSS code in the textarea — all changes are saved automatically.

We also have a guide about How to Inject Custom CSS Codes that you can check out.

Check out the screencast below to see my results:


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

Thanks Wilson

One last thing -

How do I change the days from black to another color? I'm still learning to get help from ChatGPT on this stuff but still having problems with changing the static days

Hi Ryan,

To change the color of the static days of the Appointment field. You need to Inject a CSS Code but first please remove this CSS Code in your form to avoid getting an error:

[data-css-selector="id_22"] select.pickerMonth {

  color : #f4f4f4;

}

[data-css-selector="id_22"] div.selectedDate {

  background-color : #e8e8ea;

}

[data-css-selector="id_22"] div.dayOfWeek {

  background-color : #454955;

  color : #ffffff;

}

.calendarDay.isToday {

  color : #FFD700;

}

.calendarDay {

  color : #FFD700;

}

.appointmentSlot.slot {

  color : #FFD700;

  border : 5px none #FFD700;

  background : #0d162a;

}

.appointmentSlot.slot.active {

  color : #050101;

}

Let me show you how:

1. In Form Builder, click the Paint Roller icon and go to the Style tab.
2. Scroll down to the Inject Custom CSS input box and remove the CSS Code above.

After that, you can now add the CSS Code to fix the Appointment Field. Let me show you how:

1. In the Style tab, go to the Inject Custom CSS input box and add this updated CSS Code:

[data-css-selector="id_7"] select.pickerMonth {

  color : #ffffff;

}

[data-css-selector="id_22"] select.pickerMonth {

  color : #f4f4f4;

}

[data-css-selector="id_22"] div.selectedDate {

  background-color : #e8e8ea;

}

[data-css-selector="id_22"] div.dayOfWeek {

  background-color : #454955;

  color : #ffffff;

}

.appointmentCalendar .calendarDay {

  color : #FFD700 !important;

}

.appointmentSlot.slot {

  position: relative;

  color : #FFD700;

  border : 5px none #FFD700;

  background : #0d162a;

}

Check out the screencast of the result below:

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