Customize Appointment Page

Does anyone have a CSS that will eliminate days on the calendar that are not available for appointments and times of the day that are not available? I am only accepting appointments on Sunday from 10 to 4 and Wednesday from 7 to 9. Someone making an appointment must scroll

Would this work for you?

/To remove rows of unavailable times/
.gridPage .gridDays .gridDay div.gridNoFree:not(.gridTechnicallyFree):not(.gridHighlight) { display:none; }

/To remove columns of unavailable times (any day that has no available time in it):
.gridPage .gridDays div.dayNoFree {display:none;}
/

/remove all unavailable times/
div.gridBusy {display: none !important;} div.gridTechnicallyFree {display: none !important;} div.dayNoFree {display:none;}

Found this page helpful, link is hard to find on site.
YCBM Designer Guidelines

1 Like

Thank you. This was just what I was looking for.

1 Like

HI,

Where do you put the code?
does it work for you?
thank you in advance for your return.

Regards,
Marjorie

In the Styles and Customization tab you will find a box titles Advanced Styles using CSS. Put the code in the box.

1 Like