In form editor, open the form style editor find the Custom CSS Block:


Paste this code:


%FORM.HTML_ID% .appointment-calendar-wrapper .disabled-date {
   /* disabled days - no available appts */
/* example  color: #9f9f9f !important; */
}

%FORM.HTML_ID% .appointment-calendar-wrapper .datepicker-days table tbody tr td:first-of-type {
   /* Sundays */
}

%FORM.HTML_ID% .appointment-calendar-wrapper .datepicker-days table tbody tr td:last-of-type {
   /* sundays */
}

%FORM.HTML_ID% .appointment-calendar-wrapper .datepicker-days table thead tr:last-of-type {
   /* weekday names row */
}

%FORM.HTML_ID% .appointment-calendar-wrapper .datepicker-days table thead tr:last-of-type td {
   /* weekday names cell */
}

%FORM.HTML_ID% .appointment-calendar-wrapper .datepicker-days table thead tr:nth-of-type(2) {
   /* month name row */
}

%FORM.HTML_ID% .appointment-calendar-wrapper .datepicker-days table thead tr:nth-of-type(2) .prev {
   /* previous month button */
}

%FORM.HTML_ID% .appointment-calendar-wrapper .datepicker-days table thead tr:nth-of-type(2) .next {
   /* next month button */
}

%FORM.HTML_ID% .appointment-calendar-wrapper .datepicker-days table thead tr:nth-of-type(2) .datepicker-switch {
   /* month name */
}

%FORM.HTML_ID% .appointment-calendar-wrapper .appointment-calendar {
   /* calendar table */
  width: 100%;
  height: 600px;
}

%FORM.HTML_ID% .appointment-calendar-wrapper .appointment-timeslots {
   /* timeslot section */
  width: 100%;
}

%FORM.HTML_ID% .appointment-calendar-wrapper .appointment-timeslots .time-slot {
   /* single timeslot*/

}

%FORM.HTML_ID% .appointment-calendar-wrapper .appointment-timeslots .time-slot.active-slot {
   /* single timeslot*/
}

%FORM.HTML_ID% .appointment-calendar-wrapper {
   /* calendar wrapper */
}



add custom CSS to adjust the styles of the object in the object's section.