Skip to main content
The calendar and the search bar on your own website start with the colours and font from your branding. This guide is for whoever looks after your website’s CSS: it lists what you can change so they match the rest of your site. They draw themselves inside a shadow root, so your site’s CSS can’t break them by accident, and they add no styles of their own to your page. You restyle them with variables and parts. On WordPress, the plugin’s settings page sets the primary colour, the font and the corner radius without any CSS. See WordPress plugin.

​
Variables

Set these in your own CSS, on the element:
The font is named, not downloaded: your website must already load it. To use whatever font your page uses, write overviu-calendar::part(box) { font-family: inherit; }.

​
Parts

For anything the variables don’t cover, style a part:
A template with every variable and an example for every part is ready to copy into your CSS.

​
Dark pages

Add theme="dark" to the tag (or to the WordPress shortcode) for neutral colours that suit a dark background. Your variables still apply on top.

​
Where it sits

The search bar sits in the middle of a column wider than itself, and the calendar on the left. Add align="left", align="center" or align="right" to the tag to move either one. Your page’s CSS can’t do this, because the box is inside the shadow root.

​
What stays the same

Variable and part names only change with a new major version of the script. The class names inside the calendar are not meant for styling and can change at any time.