Настройка скинов

Начиная с версии 7.0, скины Scheduler построены с использованием CSS-переменных, что позволяет легко настраивать и стилизовать внешний вид.

Related sample:  Customize and switch between themes

Ключевые CSS-переменные:

:root {
    --dhx-scheduler-font-family: Inter, Helvetica, Arial, sans-serif;
    --dhx-scheduler-font-size: 14px;
 
    --dhx-scheduler-base-colors-primary: #537CFA;
    --dhx-scheduler-base-colors-warning: #FAB936;
    --dhx-scheduler-base-colors-error: #E3334E;
    --dhx-scheduler-base-colors-error-text: #FFFFFF;
    --dhx-scheduler-base-colors-success: #1BC297;
    --dhx-scheduler-base-colors-secondary: rgba(0, 0, 0, 0.04);
 
    --dhx-scheduler-base-colors-select: #EFF3FF;
    --dhx-scheduler-base-colors-border: #D0DBE3;
    --dhx-scheduler-base-colors-icons: #A1A4A6;
 
    --dhx-scheduler-base-colors-disabled: #E9E9E9;
    --dhx-scheduler-base-colors-readonly: var(--dhx-scheduler-base-colors-icons);
    --dhx-scheduler-base-colors-text-light: #44494E;
    --dhx-scheduler-base-colors-text-base: #23272A;
    --dhx-scheduler-base-colors-background: #FFFFFF;
 
    --dhx-scheduler-container-background: var(--dhx-scheduler-base-colors-background);
    --dhx-scheduler-container-color: var(--dhx-scheduler-base-colors-text-base);
    --dhx-scheduler-scale-color: var(--dhx-scheduler-container-color);
 
    --dhx-scheduler-base-padding: 4px;
    --dhx-scheduler-border-radius: var(--dhx-scheduler-base-module);
 
    --dhx-scheduler-event-colors-primary: #537CFA;
    --dhx-scheduler-event-text-primary: rgba(255, 255, 255, 0.90);
 
    --dhx-scheduler-toolbar-height: 40px;
 
    --dhx-scheduler-header-border: var(--dhx-scheduler-default-border);
    --dhx-scheduler-halfhour-border: 1px dotted var(--dhx-scheduler-base-colors-border);
 
    /* events */
 
    --dhx-scheduler-event-background-primary: var(--dhx-scheduler-base-colors-primary);
 
    --dhx-scheduler-event-blue: linear-gradient(180deg, #527CFF 0%, #9751FC 100%);
    --dhx-scheduler-event-green: linear-gradient(180deg, #12D979 0%, #1ECDEB 100%);
    --dhx-scheduler-event-violet: linear-gradient(180deg, #D071EF 0%, #EE71D5 100%);
    --dhx-scheduler-event-yellow: linear-gradient(180deg, #FFB725 0%, #FFBB25 31.25%, 
      #FAEA27 100%);
 
    --dhx-scheduler-event-menu-background: var(--dhx-scheduler-popup-background);
    --dhx-scheduler-event-menu-color: var(--dhx-scheduler-base-colors-primary);
 
    --dhx-scheduler-event-background: var(--dhx-scheduler-event-blue);
    --dhx-scheduler-event-border: none;
    --dhx-scheduler-event-color: var(--dhx-scheduler-event-text-primary);
    --dhx-scheduler-event-line-text: var(--dhx-scheduler-container-color);
 
    --dhx-scheduler-event-marker-color: var(--dhx-scheduler-event-background);
 
    --dhx-scheduler-popup-background: var(--dhx-scheduler-container-background);
    --dhx-scheduler-popup-color: var(--dhx-scheduler-container-color);
    --dhx-scheduler-popup-border: none;
    --dhx-scheduler-popup-border-radius: var(--dhx-scheduler-border-radius);
 
}

Все эти переменные находятся в файле codebase/sources/less/src/themes/variables.less внутри пакета.

Как настраивать скины

Самый простой способ изменить внешний вид Scheduler — переопределить CSS-переменные в собственном стилевом файле. Например:

<style>
:root {
  --dhx-scheduler-base-colors-primary: #01579B;
  --dhx-scheduler-event-background: #33B579;
  --dhx-scheduler-event-color: #FFFFFF;
  --dhx-scheduler-base-colors-border: #B0B8CD;
  --dhx-scheduler-border-radius:2px;
}
</style>

Related sample:  Customize and switch between themes

Задавая переменные таким образом, вы заменяете стандартные стили своими, и изменения применяются ко всему Scheduler.

Определяя стили на уровне :root, вы обеспечиваете правильное наследование переменных во всём компоненте. Таким образом, если одна переменная зависит от другой, изменения будут распространяться корректно.

Например, переменная --dhx-scheduler-scale-color наследует значение из --dhx-scheduler-container-color.

• Если переопределить --dhx-scheduler-container-color на уровне :root, то --dhx-scheduler-scale-color также изменится.

<style>
:root {
    /* --dhx-scheduler-scale-color и другие переменные,
    наследующие --dhx-scheduler-container-color,
    будут затронуты */
  --dhx-scheduler-container-color: #222;
 
}
</style>

• Однако, если переопределить --dhx-scheduler-container-color глубже в DOM, например внутри .dhx_cal_container, это не изменит --dhx-scheduler-scale-color.

<style>
.dhx_cal_container {
    /* будут затронуты только элементы,
    использующие --dhx-scheduler-container-color напрямую */
  --dhx-scheduler-container-color: #222;
}
</style>

Использование исходных файлов

dhtmlxScheduler предоставляет стили в следующих форматах:

• codebase/dhtmlxscheduler.css — сжатый CSS-файл, готовый к использованию в продакшене;
• codebase/sources/dhtmlxscheduler.css — читаемые предсобранные CSS-файлы;
• codebase/sources/less/ — исходные LESS-файлы для скинов Scheduler.

Исходные LESS-файлы пригодятся, если вы хотите глубоко кастомизировать существующие скины или создать собственный.

С чего начать

Вы можете подключить codebase/sources/less как NPM-пакет. Эта папка содержит два типа файлов:

• стили;
• файлы с микропеременными для детальной настройки или создания новых скинов.

Сборка скинов

Внутри codebase/sources/less/ выполните:

> npm install

После завершения установки вы можете пересобрать CSS-файлы следующей командой:

> npm run build

Или запустить отслеживание изменений и автоматическую пересборку:

> npm run watch

Эти скрипты компилируют CSS из исходников и размещают результат в папке codebase пакета Scheduler, заменяя существующие CSS-файлы.

Структура

Структура папки less для версии 7.0 (может измениться в будущих релизах):

Изображения

• ./src/imgs — SVG-иконки, используемые всеми скинами
• ./src/iconfont — иконки, включённые в веб-шрифт

Определения скинов

Стандартные переменные определены в скине terrace, остальные скины переопределяют эти переменные и добавляют свои стили.

• ./src/themes
  • ./src/themes/variables.less — общие переменные для всех скинов, включая terrace
  • ./src/themes/contrast_black — переменные для контрастного чёрного скина
  • ./src/themes/contrast_white — переменные для контрастного белого скина
  • ./src/themes/material — переменные для material-скина
  • ./src/themes/dark — переменные для тёмного скина
  • ./src/themes/flat — переменные для flat-скина

Точки входа для сборки скинов

• theme.less
• package.json

Создание собственного скина

Чтобы создать новый скин, начните с копирования и переименования существующего скина из sources/less/src/themes. Выполните следующие шаги:

1) Скопируйте и переименуйте один из существующих файлов скина. Например:

-> копировать:
codebase/sources/less/src/themes/material.less
 
-> переименовать в:
codebase/sources/less/src/themes/custom.less

2) Импортируйте ваш новый файл в sources/less/src/themes/index.less следующим образом:

@import "./custom";

Затем определите свои переменные следующим образом:

:root[data-scheduler-theme='custom'] {
    --dhx-scheduler-theme: custom;
    --dhx-scheduler-font-family: Roboto, Helvetica, Arial, sans-serif;
 
    --dhx-scheduler-base-colors-primary: #0288D1;
 
}

Не забудьте определять переменные скина под селектором :root с использованием атрибута data-scheduler-theme.

Каждая новая тема должна содержать переменную --dhx-scheduler-theme, установленную в название темы.

3) Пересоберите скины командой:

npm run build

Настройки стилей через JS

Некоторые параметры стилей Scheduler не управляются только через CSS и задаются через JavaScript-конфигурацию. К ним относятся:

• hour_size_px
• и все настройки объекта scheduler.xy

Наверх