Styles

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

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:

: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.

Modular CSS

Existing styles/index.css, styles/layout.css and styles/themes/*.css imports remain complete and compatible. To reduce CSS, choose the parts you use. JavaScript extension registration does not load CSS automatically.

Optional CSS parts are documented in the styles reference. Existing full stylesheet imports remain supported; examples use only the required parts.