Документация по CSS

Это руководство объясняет, как настроить параметры цвета по умолчанию для различных элементов диаграммы Ганта. Оно фокусируется на основных селекторах классов и шаблонах, используемых для стилизации этих областей: Грид, Область временной шкалы и Панель ресурсов.

Стилизация грида

Здесь вы найдете селекторы CSS для стилизации ключевых элементов области грида.

Ниже представлена структура DOM-элемента для грида:

- .gantt_grid
    - .gantt_grid_scale
        - .gantt_grid_head_cell
    - .gantt_grid_data
        - .gantt_row.odd 
        - .gantt_row 
        - .gantt_row.gantt_row_task
        - .gantt_row.gantt_row_project
        - .gantt_row.gantt_row_milestone
            - gantt_cell.gantt_cell_tree
                - .gantt_tree_indent
                - .gantt_tree_icon.gantt_close
                - .gantt_tree_icon.gantt_open
                - .gantt_tree_content
            - gantt_cell
                - .gantt_tree_content

Заголовок грида

Чтобы настроить стиль заголовка грида, используйте селектор класса .gantt_grid_scale.

Вот пример установки общего фона и цвета шрифта для заголовков грида и временной шкалы:

.gantt_grid_scale, .gantt_task_scale, .gantt_task_vscroll {
    background-color: #eee;
}
.gantt_grid_scale, .gantt_task_scale, 
.gantt_task .gantt_task_scale .gantt_scale_cell,
.gantt_grid_scale .gantt_grid_head_cell {
    color: #000;
    font-size: 12px;
    border-bottom: 1px solid #cecece;
}

Высота шкалы

Избегайте изменения высоты заголовка грида и временной шкалы с помощью CSS.

Вместо этого используйте свойство конфигурации scale_height:

gantt.config.scale_height = 50;

Ячейка заголовка грида

Чтобы настроить стиль конкретной ячейки в заголовке грида, используйте селектор .gantt_grid_head_cell.

Вот селекторы, которые вы можете использовать:

.gantt_grid_head_cell[data-column-id='columnName'] - нацеливается на конкретный столбец по его имени.

columnName соответствует свойству name столбца:

<style>
    .gantt_grid_head_cell[data-column-id='columnName'] {
        background-color: #ededed;
        color:black;
    }
</style>

gantt.config.columns = [
    ...
    {name: "columnName", align: "center"},
    ...
];

.gantt_grid_head_cell[data-column-index='1'] - выбирает столбец по его индексу.
.gantt_grid_head_cell[data-column-name='start_date'] - выбирает столбец по имени.

Тело грида

Чтобы применить пользовательский цвет к телу грида, используйте селектор .gantt_grid_data.

Стилизация строк грида

Селектор .gantt_row используется для стилизации строк грида.

Каждая вторая строка

Чтобы чередовать цвет строк, примените стили к селектору .gantt_row.odd:

.gantt_row.odd{
    background-color:#f4f4fb;
}

Хотя четные строки кажутся выделенными, стиль на самом деле применяется к строкам с нечетными индексами (1, 3, 5 и т. д.), основываясь на их индексах.

Выделенная строка

Чтобы стилизовать выделенную строку, используйте селектор .gantt_row.gantt_selected:

.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
    background-color: #fff3a1;
}

Related sample: Styling selected row

Строки задач, проектов и вех

Чтобы стилизовать строки для задач, проектов или вех, используйте эти селекторы:

.gantt_row.gantt_row_task
.gantt_row.gantt_row_project
.gantt_row.gantt_row_milestone

Например:

.gantt_row.gantt_row_project{
   background-color:#fafafa;
   font-weight: bold;
}

Определенные строки

Для конкретных строк вы можете добавить пользовательские классы, используя шаблон grid_row_class:

<style>
    .highlighted_task.gantt_row { 
        background-color: #ff9668;
        border-color: rgba(0,0,0,0.3);
    }   
</style>

gantt.templates.grid_row_class = function(start, end, task){
    if(task.highlight){
        return "highlighted_task";     }
    return "";
};

Высота строки

Чтобы изменить высоту строки, используйте конфигурацию row_height:

gantt.config.row_height = 40;

Альтернативно, установите высоту через свойство row_height задачи:

{ id: 2, text: "Task #1", start_date: "02-04-2018", 
    duration: 8, row_height:40, parent: 1 },

Избегайте использования CSS для регулировки высоты строк, так как это может нарушить компоновку.

Стилизация ячеек/столбцов грида

Чтобы стилизовать ячейки или столбцы грида, используйте селектор .gantt_row .gantt_cell.

Вы можете нацелиться на конкретный столбец двумя способами:

По его имени, используя .gantt_row .gantt_cell[data-column-name='columnName'], например:

.gantt_grid_head_cell[data-column-id='start_date'],
.gantt_row .gantt_cell[data-column-name='start_date'] {
    background-color: #ededed;
    color:black;
}

Обратите внимание, что .gantt_grid_head_cell и .gantt_cell используют разные атрибуты данных: data-column-id и data-column-name. Это несоответствие может быть устранено в будущих обновлениях.

По его индексу, используя .gantt_row .gantt_cell[data-column-index='1'].

Стилизация временной шкалы

Этот раздел описывает селекторы CSS для настройки стилей элементов в области временной шкалы.

Структура DOM элемента области временной шкалы выглядит следующим образом:

- .gantt_task
    - .gantt_task_scale
        - .gantt_scale_line
            - .gantt_scale_cell
    - .gantt_data_area
        - .gantt_task_bg
            - .gantt_task_row
            - .gantt_task_row.odd
                - .gantt_task_cell
        - .gantt_links_area
            - .gantt_task_link
        - .gantt_bars_area
            - .gantt_task_line 
                - .gantt_task_progress_wrapper 
                    - .gantt_task_progress 
                - .gantt_task_progress_drag 
                - .gantt_task_content 
                - .gantt_task_drag.task_start_date 
                - .gantt_task_drag.task_end_date
                - .gantt_link_control.task_start_date
                - .gantt_link_control.task_end_date
                    - .gantt_link_point
        - div - custom layers

Временная шкала

Структура DOM элемента временной шкалы выглядит следующим образом:

- .gantt_task_scale
    - .gantt_scale_line
        - .gantt_scale_cell

Контейнер временной шкалы

Используйте селектор .gantt_task_scale, чтобы применить пользовательские стили к контейнеру временной шкалы.

Например, вы можете изменить цвет шрифта и границы временной шкалы следующим образом:

.gantt_grid_scale, .gantt_task_scale {
    border-bottom: 1px solid #0e0e0e;
}
 
.gantt_task .gantt_task_scale .gantt_scale_cell {
    color: #000;
}
.gantt_grid_scale .gantt_grid_head_cell {
    color: #000;
}

Полоса задачи

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

Вот пример того, как изменить стиль границы для полосы задачи:

.gantt_task_line {
    border-radius: 14px;
}

Если вы хотите изменить цвет полос задач, выполните следующие два шага:

Измените стили для границ и полос прогресса, чтобы их цвета соответствовали любому пользовательскому цвету, который вы применяете к полосе задачи:

.gantt_task_line{
    border-color: rgba(0, 0, 0, 0.25); /* Черный цвет с 25% прозрачностью */
}
.gantt_task_line .gantt_task_progress {
    background-color: rgba(0, 0, 0, 0.25);
}

Установите желаемый цвет для полосы задачи и ее содержимого:

.gantt_task_line{
    background-color: #03A9F4;
}
.gantt_task_line.gantt_task_content {
    color: #fff;
}

Для примера применения согласованных цветов границ и полос прогресса к полосам задач с различными цветами, ознакомьтесь со статьей Task Coloring.

Чтобы стилизовать строки для задач, проектов или вех, вы можете добавить пользовательский CSS к соответствующим селекторам классов:

.gantt_task_line.gantt_bar_task
.gantt_task_line.gantt_bar_project
.gantt_task_line.gantt_bar_milestone

Вот пример стилизации выбранной полосы:

.gantt_task_line.gantt_selected {
    box-shadow: 0 2px 5px #000;
}
 
.gantt_task_line.gantt_bar_project.gantt_selected {
    box-shadow: 0 2px 5px #000;
}

Related sample: Styling selected bar

Для пользовательских типов задач соответствующее имя класса будет:

{ 
    id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, 
    type:"custom_type", parent: 1 },

-> .gantt_task_line.gantt_bar_custom_type.

Разделенные задачи

Разделенные задачи рассматриваются как подзадачи родительского элемента. Светло-зеленая полоса на заднем плане представляет родительский элемент, стилизованный с помощью дополнительного CSS.

В примере, при расширении 'Task #2' отображается зеленая полоса для элемента 'Task #2' суммарного типа.

Когда разделенные задачи отображаются в одной строке, зеленая полоса остается в том же положении, но с измененными значениями прозрачности и z-index. Вы можете настроить ее, как и другие полосы в временной шкале, или полностью скрыть с помощью этого CSS:

.gantt_task_line.gantt_split_parent {
    display: none;
}

Если есть только одна разделенная задача, элемент суммарного типа (type="project") становится скрытым, так как он полностью покрыт разделенной задачей. Без разделенных подзадач элемент суммарного типа использует значения даты и продолжительности по умолчанию.

Полоса прогресса

Чтобы стилизовать полосу прогресса, вы можете использовать следующие селекторы:

.gantt_task_progress - для цвета заливки полосы прогресса;
.gantt_task_progress_drag - для рукоятки перетаскивания полосы прогресса.

Вот как обновить внешний вид полосы задачи и полосы прогресса:

Пример для фона, текста и цвета прогресса:

/* задача */
 
/* цвет фона полос задач */
.gantt_task_line {
    background-color: #3db9d3;
    border: 1px solid #2898b0;
}
 
/* цвет текста */
.gantt_task_line .gantt_task_content {
    color: #fff;
}
 
/* заполнение прогресса */
.gantt_task_progress {
    background: #299cb4;
}

Пример для полос Проекта (Суммарного элемента):

/* проект */
/* цвет фона полос проектов */
.gantt_task_line.gantt_bar_project {
    background-color: #65c16f;
    border: 1px solid #3c9445;
}
 
/* прогресс полос проектов */
.gantt_task_line.gantt_bar_project .gantt_task_progress {
    background-color: #46ad51;
}

Пример для полос Вех:

/* веха */
.gantt_task_line.gantt_milestone {
    background-color: #d33daf;
    border: 0 solid #61164f;
}

Пользовательский цвет для конкретных полос задач

Чтобы применить определенный цвет к выбранным полосам задач, назначьте пользовательский класс, используя шаблон gantt.templates.task_class:

gantt.templates.task_class = function(start, end, task){
    if(task.highlight){
        return "highlighted_task";
    }
    return "";
};

Затем используйте этот пользовательский класс в вашем CSS:

.highlighted_task.gantt_task_line {
    background-color: #ff9668;
    border-color: rgba(0,0,0,0.3);
}
.highlighted_task .gantt_task_progress {
    text-align: center;
    z-index: 0;
    background: rgba(0,0,0,0.3);
}

Выделение области внутри полосы задачи

Чтобы выделить определенные области внутри полосы задачи, добавьте дополнительные элементы, используя шаблон gantt.templates.task_text:

gantt.templates.task_text = function(start, end, task){
    return '<div class="custom_progress warm_up" style="width:20%"></div>' +
      '<div class="custom_progress in_progress" style="width:60%">'+task.text+'</div>'
      '<div class="custom_progress cool_down" style="width:20%"></div>';
};

И примените следующий CSS:

.custom_progress {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    height: 100%;
}
 
.custom_progress.nearly_done {
    background-color: #4CC259;
}
 
.custom_progress.in_progress {
    background-color: #88BFF5;
}
 
.custom_progress.idle {
    background-color: #d96c49;
}

Связь

Структура DOM элемента для связи выглядит следующим образом:

- .gantt_task_link
    - .gantt_line_wrapper
    - .gantt_link_line_right
    - .gantt_link_line_left
    - .gantt_link_line_up
    - .gantt_link_line_down
- .gantt_link_arrow.gantt_link_arrow_right
- .gantt_link_arrow.gantt_link_arrow_left

Вот как стилизовать элементы зависимостей связей:

.gantt_line_wrapper div {
    background-color: #ffa011;
}
.gantt_link_arrow_right {
    border-left-color: #ffa011;
}
.gantt_link_arrow_left {
    border-right-color: #ffa011;
}
.gantt_task_link:hover .gantt_line_wrapper div {
    box-shadow: 0 0 5px 0 #ffa011;
}

Related sample: Styling links

Чтобы отрегулировать толщину линии связи, используйте конфигурацию gantt.config.link_line_width.

Изменение размера

Чтобы стилизовать DOM-элемент изменения размера, используйте следующие селекторы:

.gantt_task_drag
.gantt_task_drag.task_start_date
.gantt_task_drag.task_end_date

Пример отключения изменения размера для начальной даты:

.gantt_task_line:hover .gantt_task_drag.task_start_date{
    display: none;
}

Пример отключения изменения размера для конечной даты:

.gantt_task_line:hover .gantt_task_drag.task_end_date{
    display: none;
}

Управление связью

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

.gantt_link_control .gantt_link_point
.gantt_link_control.task_start_date .gantt_link_point
.gantt_link_control.task_end_date .gantt_link_point

Фоновая сетка

Структура DOM для фоновой сетки выглядит следующим образом:

- .gantt_data_area
    - .gantt_task_bg
        - .gantt_task_row
        - .gantt_task_row.odd
            - .gantt_task_cell

Фоновые строки:

Чтобы изменить стиль фоновых строк по умолчанию, добавьте пользовательские стили к селектору .gantt_task_row. Например:

.gantt_row,
.gantt_task_row {
    border-bottom: 1px solid #ebebeb;
    background-color: #fff;
}

Чтобы чередовать цвет фона для строк, определите пользовательские свойства в селекторе .gantt_task_row.odd.

Вы также можете установить пользовательские цвета для выделенной строки следующим образом:

.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
    background-color: #fff3a1;
}
.gantt_task_row.gantt_selected .gantt_task_cell{
    border-right-color: #ffec6e;
}

Related sample: Styling selected row

Фоновые ячейки

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

Если вы хотите окрасить фоновый столбец, вы можете использовать шаблон timeline_cell_class, как показано здесь:

gantt.templates.timeline_cell_class = function (task, date) {
    if(!gantt.isWorkTime({date: date, unit: "day", task: task})){
        return "weekend";
    }
    return "";
};

Затем примените следующий CSS для его стилизации:

.gantt_task_cell.weekend {
    background-color: #F5F5F5;
}
 
.gantt_task_row.gantt_selected .gantt_task_cell.weekend {
    background-color: #F8EC9C;
}

Панель ресурсов

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

По умолчанию гриды и временные шкалы представления ресурсов наследуют глобальные шаблоны и конфигурации. Однако вы можете настроить уникальные конфигурации и шаблоны для панели ресурсов, предоставив их в конфигурации макета.

Чтобы нацелиться на грид и временную шкалу ресурсов в CSS, используйте их соответствующие имена представлений в селекторе:

.resourceGrid_cell .gantt_row,
.resourceHistogram_cell .gantt_task_row {
    border-bottom: 1px solid #ebebeb;
    background-color: #fff;
}

Вот основная структура DOM-элементов для панели ресурсов:

- .gantt_layout_root
    - .grid_cell 
    - .timeline_cell 
    - .resourceGrid_cell 
    - .resourceHistogram_cell 
    - .resourceTimeline_cell

Имена классов под .gantt_layout_root берутся из конфигурации макета и соответствуют свойству view ячейки макета:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {view: "grid", group:"grids", scrollY: "scrollVer"},                 ...
            ]
        },
        ...
        {
            id: "resources",
            cols: [
                { view: "resourceGrid", group:"grids", scrollY: "resourceVScroll" },                 ...
                { view: "resourceHistogram", capacity:24, scrollX: "scrollHor",                      scrollY: "resourceVScroll" }, 
                ...
            ]
        },
        ...
    ]
};

Грид ресурсов

Вы можете использовать те же селекторы, что и для грида задач. Основной селектор для грида ресурсов - .resourceGrid_cell:

.resourceGrid_cell .gantt_row,
.resourceGrid_cell .gantt_row.odd {
    background-color: rgba(232, 232, 232, 0.6);
}

Гистограмма ресурсов

Гистограмма ресурсов делится своими элементами с основной временной шкалой. По умолчанию селекторы, нацеленные на основную временную шкалу, также применяются к временной шкале ресурсов, если вы не используете конкретные классы ячеек макета, такие как .timeline_cell или .resourceHistogram_cell.

Чтобы стилизовать гистограмму ресурсов, используйте селектор .resourceHistogram_cell.

Вот структура DOM для гистограммы ресурсов:

- .gantt_task_bg
- .gantt_bars_area
    - div
        - .gantt_histogram_fill 
        - .gantt_histogram_cell 
    - div
        - .gantt_histogram_hor_bar
        - .gantt_histogram_vert_bar

Вот пример того, как вы можете изменить цвета элементов гистограммы:

.gantt_histogram_cell {
    color: #000;
}
 
.gantt_histogram_label {
    font-weight: 700;
    font-size: 13px;
}
 
.gantt_histogram_fill {
    background-color: rgba(41,157,180,.2);
}

Чтобы настроить конкретные ячейки, используйте шаблон gantt.templates.histogram_cell_class:

gantt.templates.histogram_cell_class = function(start_date,end_date,resource,tasks) {
    if (getAllocatedValue(tasks, resource) > getCapacity(start_date, resource)) {
        return "column_overload"
    }
};

И примените следующий CSS:

.column_overload .gantt_histogram_fill {
    background-color: #ffa9a9;
}

Чтобы стилизовать линии гистограммы, примените пользовательский CSS к следующим селекторам:

.gantt_histogram_hor_bar
.gantt_histogram_vert_bar

Например:

.gantt_histogram_hor_bar, .gantt_histogram_vert_bar {
    background: #299db4;
}

Диаграмма ресурсов

Диаграмма ресурсов также делится элементами с основной временной шкалой. По умолчанию селекторы, нацеленные на основную временную шкалу, также применяются к временной шкале ресурсов, если вы не используете конкретные классы ячеек макета, такие как .timeline_cell или .resourceTimeline_cell.

Чтобы стилизовать диаграмму ресурсов, используйте селектор .resourceTimeline_cell.

Вот структура DOM для диаграммы ресурсов:

- .gantt_task_bg
- .gantt_bars_area
    - div
        - .gantt_resource_marker
            - div

Основной селектор для диаграммы ресурсов - .resourceTimeline_cell.

Вот пример стилизации меток в диаграмме ресурсов:

.gantt_resource_marker div {
    background: #51c185;
    width: 28px;
    height: 28px;
    line-height: 29px;
    display: inline-block;
    color: #FFF;
    margin: 3px;
}

Чтобы настроить конкретные маркеры, используйте шаблон gantt.templates.resource_cell_class:

<style>
    .resource_marker.workday_over div {
        border-radius: 3px;
        background: #ff8686;
    }

gantt.templates.resource_cell_class = function(start_date, end_date, resource, tasks){
    var css = [];
    css.push("resource_marker");
    if (tasks.length <= 1) {
        css.push("workday_ok");
    } else {
        css.push("workday_over");
    }
    return css.join(" ");
};

К началу