Styles

styles provides the ability to override any CSS class in the calendar. You can replace any values with a list of CSS classes.

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.

Each family provides core, motion, time, annotations, weeks and months. Import core and the styles for every extension you enable, including options enabled later through set().

For a calendar with time selection and automatic light/dark switching:

import { Calendar, time } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/styles/core.css';
import 'vanilla-calendar-pro/styles/time.css';
 
new Calendar('#calendar', {
  extensions: [time],
  selectionTimeMode: 24,
}).init();

To choose one theme independently, use layout parts and matching theme parts. For example, a light calendar with time selection:

import { Calendar, time } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/styles/layout/core.css';
import 'vanilla-calendar-pro/styles/layout/time.css';
import 'vanilla-calendar-pro/styles/themes/light/core.css';
import 'vanilla-calendar-pro/styles/themes/light/time.css';
 
new Calendar('#calendar', {
  extensions: [time],
  selectionTimeMode: 24,
  selectedTheme: 'light',
}).init();

Use dark or slate-light instead of light for another built-in theme. A custom theme needs only the corresponding layout parts plus your own CSS. Theme detection and selectedTheme work as before; load every theme the calendar may switch to.

Choose either the full files or the modular files for each layer to avoid loading the same rules twice. CSS classes, selectors, browser support and public --vc-* overrides are unchanged. Some theme parts, such as motion and months, have no theme-specific rules and are valid empty stylesheets.

If you use every extension, keep the full stylesheet: it compresses better than importing all six parts.

The downloadable package.zip includes the five complete stylesheets. Modular CSS is available in the npm package and through direct CDN URLs.

CSS Classes

Below is a list of all default classes.

new Calendar('#calendar', {
  styles: {
    // Basics
    calendar: 'vc',
    controls: 'vc-controls',
    grid: 'vc-grid',
    column: 'vc-column',
 
    // Header
    header: 'vc-header',
    headerContent: 'vc-header__content',
    month: 'vc-month',
    year: 'vc-year',
    arrowPrev: 'vc-arrow vc-arrow_prev',
    arrowNext: 'vc-arrow vc-arrow_next',
 
    // Month / year picker
    wrapper: 'vc-wrapper',
    content: 'vc-content',
    months: 'vc-months',
    monthsRow: 'vc-months__row',
    monthsCell: 'vc-months__cell',
    monthsMonth: 'vc-months__month',
    years: 'vc-years',
    yearsRow: 'vc-years__row',
    yearsCell: 'vc-years__cell',
    yearsYear: 'vc-years__year',
 
    // Week row / week numbers
    week: 'vc-week',
    weekDay: 'vc-week__day',
    weekDayBtn: 'vc-week__day-btn',
    weekNumbers: 'vc-week-numbers',
    weekNumbersTitle: 'vc-week-numbers__title',
    weekNumbersContent: 'vc-week-numbers__content',
    weekNumber: 'vc-week-number',
 
    // Dates
    collapse: 'vc-collapse',
    dates: 'vc-dates',
    datesRow: 'vc-dates__row',
    date: 'vc-date',
    dateBtn: 'vc-date__btn',
 
    // Popups and tooltip
    datePopup: 'vc-date__popup',
    dateRangeTooltip: 'vc-date-range-tooltip',
 
    // Time controls
    time: 'vc-time',
    timeContent: 'vc-time__content',
    timeHour: 'vc-time__hour',
    timeMinute: 'vc-time__minute',
    timeKeeping: 'vc-time__keeping',
    timeRanges: 'vc-time__ranges',
    timeRange: 'vc-time__range',
  },
});

CSS Variables

Every color in the built-in themes (light, dark, slate-light) is defined through a CSS custom property with the theme's original color as the fallback. This means you can restyle the calendar by setting a handful of variables, without touching any CSS classes or waiting for a theme override to cascade correctly.

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

If a variable is left unset, the calendar renders exactly as before — nothing changes unless you explicitly set a variable.

Base

Header / title

Month / year picker

Collapse control

Week row / week numbers

Dates

Weekends / holidays

Selected ranges (multiple-ranged)

Popups & tooltip

Time controls

Sizing

The calendar is sized entirely in rem, so it scales with the root font-size. If a page resets it away from the browser default of 16px (common on older frameworks such as Bootstrap 3, usually to 10px), the calendar renders at the wrong scale. Restore the intended size with a single transform:

[data-vc='calendar'] {
  transform: scale(16 / <root font-size in px>);
}

For example, with a 10px root: transform: scale(1.6);.