Adding Custom Styling to the Enquire MAP Appointment Scheduler/ Calendar

Adding Custom Styling to the Enquire MAP Appointment Scheduler/ Calendar

Enquire MAP provides a feature in the form editor to modify various styles to further enhance the calendar. Follow the next set of steps:

Step 1: Access Enquire MAP to open the form style editor then find the Custom CSS Block:

 Step 2: Paste the following 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 */
}

 Step 3: Enquire MAP also provides the option to add custom CSS to adjust the styles of the object in the object's section.