How to customize appointments field?

  • Profile Image
    Ln9
    Asked on February 09, 2021 at 09:16 PM

    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.

  • Profile Image
    Ahmed_S
    Answered on February 10, 2021 at 12:40 AM

    Greetings,

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

    1612935076_60236fa48b763_1.png

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

    1612935101_60236fbdf24e2_2.png

    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.