How to customize appointments field?

I love the new appointment scheduler. It needs some things. Like break times for each day. Also why the 12 hr clock?, that made creating my appointment times an exhausting experience. Also, if I could customize the color of the time blocks, and not use that ugly default blue color.

Greetings,

You can change the Appointment properties as you wish, you can set the break time as you can see in this screenshot:

Also you can set the time format to be 24 hr instead of 12 hr.

And you can change the colors by using a custom CSS code, you need to copy the below code and inject it into your form, please check this guide for how to inject custom CSS into your form.

.appointmentSlot{

  border-color: #ff5959;

  color: #ff5959;

}



.appointmentCalendar .dayOfWeek {

  color: #ff5959;

  background-color:#ffc6c6; 

}



.appointmentCalendar .calendarDay{

  background-color: #ffefef;

  color: #ff5959;

}

.appointmentCalendar .calendarDay.isActive .calendarDayEach{

   background: #ff5959;

  color: #ffefef;

  border-color: #ff5959;

}



.appointmentCalendar .calendarDay.isToday .calendarDayEach{

  border-color: #ffc6c6;

}

Feel free to change the hex values of the colors used in this code, you can use this tool to pick the hex value of the desired color.
https://www.w3schools.com/colors/colors_picker.asp

Please let us know if you need further assistance.