Темы

Календарь поддерживает пользовательские темы и по умолчанию имеет светлую и темную тему.

Если параметр themeAttrDetect установлен на false, тема будет определена системными настройками пользователя или параметром selectedTheme.

Календарь может автоматически определить и отслеживать тему сайта, исходя из установленного тега и атрибута. Дополнительные сведения об этом параметре можно найти в справочнике.

Если ваш сайт поддерживает только одну тему или вы хотите настроить внешний вид календаря по своему усмотрению, вы можете явно выбрать одну из доступных тем.

Пример ниже демонстрирует принудительное использование темной темы:

А вот тот же пример, но с использованием светлой темы:

Как описано выше, вы можете использовать собственные темы, создавать их самостоятельно или импортировать из календаря, если они существуют.

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

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

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 описано в справочнике стилей. Старые полные файлы поддерживаются; примеры подключают только необходимые части.