Скины
dhtmlxGantt поставляется с несколькими встроенными скинами, которые позволяют изменить внешний вид диаграммы Ганта:
Начиная с версии 9.0, все эти скины включены в основной файл dhtmlxgantt.css. Чтобы активировать скин, вы можете установить свойство gantt.skin:
gantt.skin = "dark";
Или использовать метод gantt.setSkin():
gantt.setSkin("dark");
Для Gantt версии 8.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;800&display=swap'
);
При необходимости вы можете удалить шрифт непосредственно из .less файлов, расположенных в папке codebase/sources/less/, и перестроить скин, как описано в статье Настройка Скинов.
Скин 'Terrace'
Чтобы использовать скин 'Terrace' по умолчанию, подключите стандартный CSS-файл:
- dhtmlxgantt.css
Скин 'Dark'
Чтобы включить скин 'Dark', подключите стандартный CSS-файл:
- dhtmlxscheduler.css
Затем установите скин, используя свойство scheduler.skin:
scheduler.skin = "dark";
Скин 'Material'
Чтобы применить скин 'Material', подключите стандартный CSS-файл:
- dhtmlxgantt.css
Установите скин, используя свойство gantt.skin:
gantt.skin = "material";
Related sample: Material theme
Начиная с версии 6.3, шрифт Roboto больше не импортируется с скином Material. При необходимости вы можете вручную добавить шрифт Roboto, как показано ниже:
<link rel="stylesheet" href="'https://fonts.googleapis.com/css?'+
+'family=Open+Sans|Roboto:regular,medium,thin,bold'">
Скин 'Contrast Black'
Чтобы использовать скин 'Contrast Black', подключите стандартный CSS-файл:
- dhtmlxgantt.css
Установите скин, используя свойство gantt.skin:
gantt.skin = "contrast-black";
Related sample: High contrast theme - Black
Скин 'Contrast White'
Чтобы переключиться на скин 'Contrast White', подключите стандартный CSS-файл:
- dhtmlxgantt.css
Установите скин, используя свойство gantt.skin:
gantt.skin = "contrast-white";
Related sample: High contrast theme - White
Скин 'Skyblue'
Чтобы включить скин 'Skyblue', подключите стандартный CSS-файл:
- dhtmlxgantt.css
Установите скин, используя свойство gantt.skin:
gantt.skin = "skyblue";
Related sample: 'Skyblue' skin
Скин 'Meadow'
Для скина 'Meadow' подключите стандартный CSS-файл:
- dhtmlxgantt.css
Установите скин, используя свойство gantt.skin:
gantt.skin = "meadow";
Скин 'Broadway'
Чтобы применить скин 'Broadway', подключите стандартный CSS-файл:
- dhtmlxgantt.css
Установите скин, используя свойство gantt.skin:
gantt.skin = "broadway";
Related sample: 'Broadway' skin