Additional Features

Styles

All CSS classes used in the calendar are variables that can be customized by replacing them with your own values.

When replacing CSS classes with your own, keep in mind that you will need to create and style this class in your own CSS.

Below is an example of replacing the class for the arrows with your own. A full list of classes can be found in the reference guide.

CSS Variables

If you only need to change colors, you don't need to replace any classes at all — every color in the built-in themes is exposed as a CSS custom property, with the theme's original color as the fallback:

css

:root {
  --vc-date-selected-bg: #7c3aed;
  --vc-date-selected-color: #fff;
}

Nothing changes unless you explicitly set a variable. The full list of variables is available in the reference guide.