Пользовательский цвет события

Существует три способа настроить цвет события:

Указание цветов в свойствах объекта события

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

textColor — задаёт цвет шрифта события;
color — задаёт цвет фона события.

Установка цвета события в объекте данных

scheduler.parse([
   {id:1, start_date:"2019-05-21",end_date:"2019-05-25",text:"Task1", color:"red"},
   {id:2, start_date:"2019-06-02",end_date:"2019-06-05",text:"Task2", color:"blue"}
],"json");
...
scheduler.getEvent(1).color = "yellow";
scheduler.updateEvent(1);

Имейте в виду, что это специальные свойства. Планировщик автоматически проверяет их и применяет указанные цвета к контейнеру и тексту события. Если они отсутствуют, используются цвета по умолчанию.

Эти свойства поддерживают любые допустимые CSS-форматы цвета, например:

ev.color = "#FF0000";
ev.color = "red";
ev.color = "rgb(255,0,0)";

Добавление дополнительных CSS-классов к событию

Другой способ задать цвет события — добавить к нему пользовательский CSS-класс или классы.

Методика

Вы можете применить CSS-класс к событию, используя шаблон event_class.
По умолчанию шаблон выглядит так:

scheduler.templates.event_class = function(start, end, ev){
     return "";
}

Эта функция возвращает строку, которая будет добавлена к атрибуту class события, поэтому вы можете возвращать разные классы в зависимости от состояния события.

Related sample: Coloring events

Пример

Предположим, вы хотите окрашивать события по-разному в зависимости от того, относятся ли они к менеджерам или сотрудникам: зелёный для менеджеров и оранжевый для сотрудников. Вот как это сделать:

Добавьте дополнительное свойство в вашу модель данных, например 'type', которое будет содержать тип пользователя: 'manager' или 'employee'.

Создайте CSS-классы, соответствующие этим типам, например 'manager_event' и 'employee_event'. CSS может выглядеть так:

Переопределение стандартных CSS-классов

<style>    .manager_event {
        --dhx-scheduler-event-background: #009966;
        --dhx-scheduler-event-color: black;
    }
 
    .employee_event {
        --dhx-scheduler-event-background: #FF9933;
        --dhx-scheduler-event-color: black;
    }
</style>

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

<style>    /* событие в дневном или недельном виде */
    .dhx_cal_event.manager_event div{
        background-color: #009966 !important;
        color: black !important;
    }
    .dhx_cal_event.employee_event div{
        background-color: #FF9933 !important;
        color: black !important;
    }
 
    /* многодневное событие в месячном виде */
    .dhx_cal_event_line.manager_event{
        background-color: #009966 !important;
        color: black !important;
    }
    .dhx_cal_event_line.employee_event{
        background-color: #FF9933 !important;
        color: black !important;
    }
 
    /* событие с фиксированным временем в месячном виде */
    .dhx_cal_event_clear.manager_event{
        color: black !important;
    }
    .dhx_cal_event_clear.employee_event{
        color: black !important;
    }
</style>

Наконец, переопределите шаблон event_class для назначения классов:

Применение дополнительных CSS-классов к событиям:

scheduler.templates.event_class = function (start, end, event) {
    if (event.type == 'manager') return "manager_event";
    return "employee_event"; 
};

Related sample: Coloring events

Загрузка цветов из данных

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

Допустим, у вас есть список пользователей, назначенных на задачи, и стили задач зависят от свойств пользователя:

[
    {"key":1, "label":"John", "backgroundColor":"#03A9F4", "textColor":"#FFF"},
    {"key":2, "label":"Mike", "backgroundColor":"#f57730", "textColor":"#FFF"},
    {"key":3, "label":"Anna", "backgroundColor":"#e157de", "textColor":"#FFF"},
    {"key":4, "label":"Bill", "backgroundColor":"#78909C", "textColor":"#FFF"},
    {"key":7, "label":"Floe", "backgroundColor":"#8D6E63", "textColor":"#FFF"}
]

В этом случае пользователи и их цвета управляются отдельно от планировщика, который заранее не знает ни идентификаторов пользователей, ни их цветов.

Практический подход:

Определите именованный serverList для этой коллекции:

scheduler.serverList("people");

Загрузите эти опции на страницу, используя один из поддерживаемых форматов данных или через собственный XHR-запрос.
После загрузки динамически сгенерируйте CSS-стили из данных:

scheduler.attachEvent("onLoadEnd", function(){
    // используйте уникальный ID для style-элемента
    var styleId = "dynamicSchedulerStyles";
 
    // повторно используйте style-элемент, если он уже существует
 
    var element = document.getElementById(styleId);
    if(!element){
        element = document.createElement("style");
        element.id = styleId;
        document.querySelector("head").appendChild(element);
    }
    var html = [];
    var resources = scheduler.serverList("people");
 
    // создайте CSS-правила для каждого пользователя и вставьте их в style-элемент
 
    resources.forEach(function(r){
        html.push(`.event_resource_${r.key} {
            --dhx-scheduler-event-background:${r.backgroundColor};
            --dhx-scheduler-event-color:${r.textColor};
        }`);
    });
    element.innerHTML = html.join("");
});

Затем назначьте сгенерированные классы в шаблоне event_class:

scheduler.templates.event_class = function (start, end, event) {
    var css = [];
 
    if(event.owner_id){
        css.push("event_resource_" + event.owner_id);
    }
 
    return css.join(" ");
};

Наверх