How do I add custom styling to the ActiveDEMAND appointment scheduler calendar?

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 */
}

%FORM.HTML_ID% .appointments .appointment-length{
   /* appointment length */
}

%FORM.HTML_ID% .appointment-calendar-wrapper .datepicker-days table tbody tr td{
/* Individual dates in calendar */
}

For styling when hovering over an item add ":hover" before first bracket

%FORM.HTML_ID% .appointment-calendar-wrapper .datepicker-days table tbody tr td:hover{
/*Style when hovering over individual dates in calendar */
}

Updated on: 06/10/2022