Custom styling ^BETA

Customizing the Scheduler Embed #

Internally the cronofy-scheduler-button element uses the shadow DOM to fully separate the internal styles and HTML from your own application. You can use the CSS ::part pseudo-element to apply custom styling to both the button and popup window to make their look and feel match your application.

::part(button) #

The button part selects the <button> component. You can apply colors, text colors, border styles, padding, and other CSS properties.

The selector also works when combined with CSS pseudo-classes such as :hover or :disabled.

#my-scheduler-button::part(button) {
    color: white;
    background-color: #ff0044;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
}

#my-scheduler-button::part(button):hover {
    color: black;
    background-color: #d3d3d3;
}

::part(dialog) #

The dialog part is used to select the popup that is displayed when the button is clicked. You can change properties such as the dialogs width and height, alter the border radius, add padding, and other CSS properties. Note that the Scheduler form itself is not stylable and will be displayed with a white background.

#my-scheduler-button::part(dialog) {
    border-radius: 4px;
    width: 80vw;
    height: 80dvh;
}