Изменение размера шкалы и блоков событий (v6.0)
Эта статья относится к dhtmlxScheduler версии 6.0 и ниже. Для версий 7.0 и выше, пожалуйста, ознакомьтесь с подробностями здесь.
В этом разделе рассматривается настройка размера единиц шкалы и блоков событий на примере четырёх типичных ситуаций:
Проблема 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, соответствуя шкале.
Related sample: Changing the Y-Axis step
Решение 2. Настройка блока события
Для изменения отображения блоков событий используйте метод scheduler.renderEvent, который позволяет задать собственный шаблон для событий.
scheduler.renderEvent = function(container, ev) {
// ваш код кастомизации
}
Подробнее смотрите в разделе Пользовательское Окно События.
Related sample: 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 style='height:22px;line-height:22px;'>"+format(date)+"</div>";
date = scheduler.date.add(date,step,"minute");
}
return html;
}
Связанные примеры:
Наверх