Изменение размера шкалы и блоков событий (v6.0)

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

В этом разделе рассматривается настройка размера единиц шкалы и блоков событий на примере четырёх типичных ситуаций:

Проблема 1: События короче 1 часа отображаются такого же размера, как и часовые события. Необходимо, чтобы короткие события правильно вписывались в шкалу.

Проблема 2: Короткие события, происходящие в разное время в течение одного часа, накладываются друг на друга. Требуется избежать такого наложения.

Проблема 3: После изменения высоты единицы шкалы необходимо скорректировать полосатый фон.

Проблема 4: По умолчанию шаг шкалы установлен на 1 час, но требуется изменить его, например, на 30 минут.

Как сделать так, чтобы короткие события вписывались в шкалу

Сначала рассмотрим стандартное поведение блоков событий:

• Высота каждой единицы шкалы (часа) по умолчанию составляет 44px.
• Минимальная высота блока события - 44px.
• События короче 1 часа отображаются высотой 44px, поэтому событие на 15 минут выглядит так же, как и часовое событие.
• Для событий длиннее 1 часа высота рассчитывается пропорционально шкале (например, событие на 90 минут будет высотой 63px, если 1 час - это 44px).

Если требуется, чтобы события на 30 минут корректно отображались на шкале, есть два способа:

• Увеличить высоту единицы шкалы.
• Настроить внешний вид блока события.

Решение 1. Изменение высоты единицы шкалы

Высота единицы шкалы настраивается с помощью опции scheduler.config.hour_size_px.

Например, чтобы удвоить высоту единицы, установите следующее значение:

scheduler.config.hour_size_px = 88;

scheduler.init(...);

В результате высота единицы шкалы станет 88px, и событие на 30 минут займет 44px, соответствуя шкале.

Changing the Y-Axis step

Решение 2. Настройка блока события

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

scheduler.renderEvent = function(container, ev) {
    // ваш код кастомизации
}

Подробнее смотрите в разделе Пользовательское Окно События.

Custom event box

Предотвращение наложения коротких событий

Чтобы короткие события отображались раздельно и не перекрывали друг друга, включите опцию scheduler.config.separate_short_events:

scheduler.config.separate_short_events = true;

Как изменить фон в соответствии с установленной шкалой

Фон планировщика задается изображением. Чтобы изменить его, переопределите CSS-класс .dhx_scale_holder следующим образом:

<style>
.dhx_scale_holder {
     background-image: url("imgs/myNewImage.png");
}
</style>

Затем инициализируйте планировщик:

scheduler.init(...);

Как изменить шаг шкалы

Для изменения стандартного шага шкалы переопределите шаблон scheduler.templates.hour_scale. Для шага в 30 минут шаблон можно переписать так:

var format = scheduler.date.date_to_str("%H:%i");
var step = 30;
        
scheduler.templates.hour_scale = function(date){
    var html="";
    for (var i="0;" i<60/step; i++){
        html+="<div>"+format(date)+"</div>";
        date = scheduler.date.add(date,step,"minute");
    }
    return html;
}

Связанные примеры:

Custom Y-Axis