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


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


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

1 Like