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 */
}
add custom CSS to adjust the styles of the object in the object's section.
Comments
Please sign in to leave a comment.