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.