Appointment Field Slot Availability Color Indicator

If slots are still available → show normal color (blue)If fully booked → show red color with “(Full)”

Hi esupport.tw, 

Thanks for using Jotform. You can easily change the color of the Appointment filled Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

.calendarDay:not(.isUnavailable) {

  color: red !important;

  font-weight: bold !important;

}

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.

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

Hi,

I found it display "Red" color after changes.

What we hope is

If slots are still available → show normal color (blue)
If fully booked → show red color with “(Full) text”

Would it possible to display the Full text or "額滿" in our language?

Thanks!

Hi esupport.tw, 

With CSS, you can style available slots in blue and fully booked slots in red, but it’s not possible to add extra text like Full or 額滿 directly. As a workaround, you can add a paragraph field above the Appointment field explaining that red slots mean Full/額滿. Check out my screenshot below to see the result:

Reach out anytime if more questions come to mind.