Скины

Доступно несколько встроенных скинов:

Начиная с версии 7.0, все скины включены в основной файл dhtmlxscheduler.css. Вы можете активировать скин, установив свойство scheduler.skin:

scheduler.skin = "dark";

Также вы можете использовать метод scheduler.setSkin():

scheduler.setSkin("dark");

В версиях Scheduler 6.0 и ниже скины предоставлялись отдельными CSS-файлами.

Использование шрифтов

По умолчанию скины загружают шрифт Inter с ресурса https://fonts.googleapis.com. Подробнее о Google Fonts можно узнать здесь.

@import (css) url(
'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'
);

При необходимости вы можете удалить импорт шрифта непосредственно из файлов .less, находящихся в папке codebase/sources/less/skins/material, а затем пересобрать скин, как описано в статье Настройка скинов.

Скин 'Terrace'

Для использования скина по умолчанию подключите стандартный CSS-файл:

dhtmlxscheduler.css

DHTMLX Scheduler - Light Theme

Related sample: Terrace skin

Скин 'Dark'

Для применения скина 'Dark' подключите стандартный CSS-файл:

dhtmlxscheduler.css

Затем установите скин с помощью свойства scheduler.skin:

scheduler.skin = "dark";

DHTMLX Scheduler - Dark Theme

Related sample: Dark skin

Скин 'Material'

Для активации скина 'Material' подключите стандартный CSS-файл:

dhtmlxscheduler.css

Затем выберите скин с помощью свойства scheduler.skin:

scheduler.skin = "material";

DHTMLX Scheduler - Material

Related sample: Material skin

Скин Material требует шрифт Roboto, который не включён по умолчанию. Его необходимо добавить вручную следующим образом:

@import url(
'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap'
);

Скин 'Flat'

Для использования скина 'Flat' подключите стандартный CSS-файл:

dhtmlxscheduler.css

Затем выберите скин через свойство scheduler.skin:

scheduler.skin = "flat";

DHTMLX Scheduler - Flat Theme

Related sample: Flat skin

Скин 'Contrast Black'

Для применения скина 'Contrast Black' подключите стандартный CSS-файл:

dhtmlxscheduler.css

Затем выберите скин с помощью свойства scheduler.skin:

scheduler.skin = "contrast-black";

DHTMLX Scheduler - Contrast Black Theme

Скин 'Contrast White'

Для применения скина 'Contrast White' подключите стандартный CSS-файл:

dhtmlxscheduler.css

Затем выберите скин с помощью свойства scheduler.skin:

scheduler.skin = "contrast-white";

DHTMLX Scheduler - Contrast White Theme

Наверх