Изменение размера шкалы и блоков событий

Если вы работаете с dhtmlxScheduler 6.0 или более ранней версией, подробности смотрите здесь.

В этой статье описывается, как настраивать размеры блоков событий и временной шкалы.

Отображение коротких событий

Давайте рассмотрим, как по умолчанию ведут себя блоки событий:

• Высота единицы шкалы по умолчанию составляет 44px (что соответствует одному часу), как указано в hour_size_px.
• Минимальная высота блока события — 20px, задается через конфигурацию scheduler.xy.min_event_height.
• Поскольку события не могут быть меньше 20px, как 15-минутные, так и 5-минутные события будут иметь одинаковую высоту.
• Для событий с высотой менее 42px используется специальный режим отображения и добавляется дополнительный CSS-класс:
  • .dhx_cal_event--small для событий менее 42px
  • .dhx_cal_event--xsmall для событий менее 30px

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

scheduler.config.hour_size_px = 90;
scheduler.render();// или scheduler.init(...)

Кастомизация блока события

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

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

Подробнее смотрите в соответствующей главе — Пользовательское Окно События.

Related sample:  Custom event box

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

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

scheduler.config.separate_short_events = true;

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

Чтобы изменить стандартный интервал шкалы, вы можете переопределить шаблон 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 style='height:22px;line-height:22px;'>"+format(date)+"</div>";
        date = scheduler.date.add(date,step,"minute");
    }
    return html;
}

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

Related sample:  Custom Y-Axis

Наверх