Коробка настраиваемого события

dhtmlxScheduler предоставляет возможность определить пользовательский внешний вид для событий.

примечание

Подходит только для Вид дня, Вид недели и Вид единиц

Методика

Настройка отображения событий достигается с помощью метода renderEvent:

scheduler.renderEvent = function(container, ev) {
    // ваш код настройки
}

• container - контейнер события
• ev - объект события

Коробка настраиваемого события

Важные советы

• Возвращение true применяет пользовательскую логику, возвращение false применяет логику по умолчанию.
• Некоторые CSS-классы имеют особое назначение (они должны идти первыми в className элемента):
  • dhx_event_move - элемент с этим стилем можно перетаскивать (обычно это заголовок события).
  • dhx_event_resize - перетаскивание элемента с этим стилем изменит продолжительность события.

const html = "<div className='dhx_event_move my_event_move' "

Пример

Ниже приведён пример некоторого пользовательского внешнего вида:

[Задание пользовательского внешнего вида коробки события](Specifying a custom look for the event's box)

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

scheduler.renderEvent = function(container, ev) {
    const container_width = container.style.width; // напр., "105px"

    // секция перемещения
    let html = "<div className='dhx_event_move my_event_move' style='width: " + 
    container_width + "'></div>";

    // контейнер для контента события
    html+= "<div className='my_event_body'>";
    html += "<span className='event_date'>";
    // здесь два варианта: показать только начальную дату для коротких событий или начальную+конечную для длинных
    if ((ev.end_date - ev.start_date)/60000>40){//если событие длится более 40 минут
        html += scheduler.templates.event_header(ev.start_date, ev.end_date, ev);
        html += "</span>

";
    } else {
        html += scheduler.templates.event_date(ev.start_date) + "</span>";
    }
    // отображение текста события
    html += "<span>" + scheduler.templates.event_text(ev.start_date,ev.end_date,ev)+
    "</span>" + "</div>";

    // секция изменения размера
    html += "<div className='dhx_event_resize my_event_resize' style='width: " +
    container_width + "'></div>";

    container.innerHTML = html;
    return true; //требуется, true - чтобы отобразить пользовательскую форму, false - стандартную форму
};

и следующий связанный CSS:

<style type="text/css" >
    /* фоновый цвет для всего контейнера и его границы*/
    .my_event {
        background: #add8e6;
        color: black;
        border: 1px solid #778899;
        overflow: hidden;
        display: block;
    }

    .dhx_cal_event_clear.my_event {
        height: 22px;
    }

    /* стили для содержания события */
    .dhx_cal_event.my_event .my_event_body {
        padding-top: 3px;
        padding-left: 5px;
    }
    /* информация о дате события */
    .my_event .event_date {
        font-weight: bold;
        padding-right: 5px;
    }
    /* секция изменения размера события */
    .my_event_resize {
        height: 3px;
        position: absolute;
        bottom: -1px;
    }
    /* секция перемещения события */
    .my_event_move {
        position: absolute;
        top: 0;
        height: 10px;
        cursor: pointer;
    }
</style>

Можно также использовать CSS-переменные вместо фиксированных значений цветов, как показано ниже:

<style>
.my_event {
    --dhx-scheduler-event-background: #add8e6;
    --dhx-scheduler-event-color: black;
    --dhx-scheduler-event-border: 1px solid #778899;

    overflow: hidden;
    display: block;
}
</style>

Коробка настраиваемого события