Custom CSS

You can customize the calendar’s style by adding your own CSS file.

• Create a CSS file with your own CSS.
• Upload the CSS file to your web server.
• Copy the hyperlink to your CSS file (let’s say it’s https://www.your-domain.com/your-css-file.css)
• Put this after the latest / of the embed code:

?css=https://www.your-domain.com/your-css-file.css

Examples

Javascript embed code:

<script type="text/javascript" src="//www.availabilitycalendar.com/embed-js/amPJIPEvaSt3uS4rrqqM/nl-0-0-1-1-0-0-0-0-0/?css=https://www.your-domain.com/your-css-file.css">

Iframe embed code:

<iframe src="//www.availabilitycalendar.com/embed/amPJIPEvaSt3uS4rrqqM/nl-0-0-1-1-0-0-0-0-0/?css=https://www.your-domain.com/your-css-file.css" height="246" width="100%" frameborder="0" allowtransparency="true">

Please note that in order for this to work, the css link need to have the https protocol. Since AvailabilityCalendar.com uses https, http is not possible for the css link.