Customizing the UI Elements

All of the UI Elements are fully styled and ready to use without any customization, but there are plenty of scenarios where developers might want to customize the look and feel of a particular element. Perhaps you need to match the element’s appearance to your brand’s styleguide, or maybe you need to support alternative theming options (“dark mode”, anybody?). Every UI Element has been built with this kind of customization in mind.

Custom colors with styles.colors #

Colors are the most commonly customized part of the UI Elements. To keep that level of customization as simple as possible, key colors in the UI Elements can be set when an element is initialized using the styles.colors option.

CronofyElements.AvailabilityRules({
    /* other configuration options */
    styles: {
        colors: {
            hairline: "#15b3d6",
            available: "green",
            unavailable: "red"
        }
    }
});

For elements that support this feature, you can view all the available styles.colors options on that element’s documentation page.

Custom CSS with styles.prefix #

Every element can be given a “style prefix” as a configuration option. All customizable DOM nodes within the element are use this prefix in their class names. For example, if the prefix was set as “Foo”, the class name on a slot node would be Foo__slot.

CronofyElements.AvailabilityViewer({
    /* other configuration options */
    styles: {
        prefix: "custom-name"
    }
});

If left unset, the style.prefix defaults to the name of the element (e.g. "AvailabilityViewer").

To be sure to avoid specificity issues with CSS, make sure any custom selectors you add are preceded by .PREFIX. For example, if your prefix is ABC, you would target the button styles with this selector:

.ABC .ABC__button {
    /* your button styles go here */
}

Customization examples #

With the ability to apply your own CSS to the UI Elements, the customization options are nearly limitless. Here are a few examples of some common scenarios:


Customizing the color of grid borders #

Changing the color of the grid-lines and borders for the Availability Viewer and Avaialability Rules elements can be easily achieved using the style.colors initialization option. The same effect is also possible by writing custom CSS, but requires more detail to implement fully.

1. Using the style.colors options:

CronofyElements.AvailabilityViewer({
    /* other configuration options */
    styles: {
        colors: {
            hairline: "#15b3d6"
        }
    }
});

2. Using custom CSS:

.PREFIX .PREFIX__button,
.PREFIX .PREFIX__timelines,
.PREFIX .PREFIX__example,
.PREFIX .PREFIX__grid-column{
    border-color: #15b3d6;
}
.PREFIX .PREFIX__timeline path {
    stroke: #15b3d6;
}

Note: SVG nodes require stroke property to be set, and require extra selector-specificity.


Repositioning the week-navigation in the Availability Viewer #

To move the week-navigation buttons in the Availability Viewer element, you need to apply some absolute positioning (and add a little padding to the top bar to make space for the repositioned buttons):

.PREFIX .PREFIX__navigation {
    position: absolute;
    top: 0;
    right: 0;
}
.PREFIX .PREFIX__month-labels {
    padding-top: 20px;
}

Change the ‘available’ and ‘unavailable’ colors in the Availability Rules element #

1. Using the style.colors options:

CronofyElements.AvailabilityRules({
    /* other configuration options */
    styles: {
        colors: {
            available: "#15b3d6",
            unavailable: "red"
        }
    }
});

2. Using custom CSS:

/* Available color */
.PREFIX .PREFIX__slot-background.PREFIX__slot-background--available,
.PREFIX .PREFIX__example.PREFIX__example--available {
    background-color: #15b3d6;
}
/* Unavailable color */
.PREFIX .PREFIX__slot-background.PREFIX__slot-background--unavailable,
.PREFIX .PREFIX__example.PREFIX__example--unavailable {
    background-color: red;
}
Search