Стили

styles предоставляет возможность переопределить любой CSS-класс в календаре. Вы можете заменить любые значения на список из CSS классов.

Модульные стили

Существующие импорты styles/index.css, styles/layout.css и styles/themes/*.css остаются полными и совместимыми. Для уменьшения CSS подключайте только нужные части. Регистрация расширения JavaScript сама по себе не загружает CSS.

В каждой группе доступны core, motion, time, annotations, weeks и months. Подключите core и стили всех используемых расширений, включая функции, которые будут включены позднее через set().

Календарь с выбором времени и автоматическим переключением светлой/тёмной темы:

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();

Для независимого выбора темы подключите части раскладки и соответствующие части темы. Например, светлый календарь с выбором времени:

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();

Вместо light можно использовать dark или slate-light. Для своей темы нужны только соответствующие части раскладки и ваш CSS. Определение темы и selectedTheme работают как прежде; подключайте все темы, на которые календарь может переключаться.

В каждом слое выбирайте полные файлы либо отдельные части, чтобы не загружать одни правила дважды. CSS-классы, селекторы, поддержка браузеров и публичные переопределения --vc-* сохраняются. Некоторые части тем, например motion и months, не содержат собственных цветовых правил и являются корректными пустыми CSS-файлами.

Если используются все расширения, оставьте полный файл стилей: он сжимается лучше, чем все шесть частей вместе.

Архив package.zip содержит пять полных файлов стилей. Модульные части доступны в npm-пакете и по прямым CDN-ссылкам.

CSS-классы

Ниже приведен список всех классов по умолчанию.

new Calendar('#calendar', {
  styles: {
    // Базовые
    calendar: 'vc',
    controls: 'vc-controls',
    grid: 'vc-grid',
    column: 'vc-column',
 
    // Заголовок / шапка
    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',
 
    // Выбор месяца / года
    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: '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',
 
    // Даты
    collapse: 'vc-collapse',
    dates: 'vc-dates',
    datesRow: 'vc-dates__row',
    date: 'vc-date',
    dateBtn: 'vc-date__btn',
 
    // Попапы и тултип
    datePopup: 'vc-date__popup',
    dateRangeTooltip: 'vc-date-range-tooltip',
 
    // Управление временем
    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-переменные

Каждый цвет во встроенных темах (light, dark, slate-light) задан через CSS custom property с оригинальным цветом темы в качестве значения по умолчанию (fallback). Это значит, что внешний вид календаря можно поменять, задав несколько переменных — без переопределения CSS-классов и без риска, что переопределение темы не сработает как ожидается.

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

Если переменная не задана, календарь рендерится ровно как раньше — ничего не меняется, пока вы явно не зададите переменную.

Базовые

Заголовок / шапка

Выбор месяца / года

Управление сворачиванием

Строка недели / номера недель

Даты

Выходные / праздники

Выбранные диапазоны (multiple-ranged)

Попапы и тултип

Управление временем

Размеры

Все размеры календаря заданы в rem, поэтому он масштабируется вместе с базовым размером шрифта (root font-size). Если на странице этот размер сброшен со стандартных браузерных 16px (частая практика на старых фреймворках вроде Bootstrap 3, обычно до 10px), календарь отрендерится в неверном масштабе. Вернуть исходный размер можно одним transform:

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

Например, при 10px на корне: transform: scale(1.6);.