Hello,
starting from dhtmlxScheduler v6.0.0 you can override the size and position of the event by redefining getEventTop/getEventHeight/getSectionHeight methods of the timeline,
which allows you to place events into custom subrows.
Please check this example:
https://snippet.dhtmlx.com/017nx1ru
Currently, scheduler can’t automatically adjust the heights of sections to custom positions of bars so you need to manually override the sizes of the sections in order to fit all needed subrows.
It was supposed to be done using getSectionHeight setting, but there appears to be a bug with it, so the example contains a workaround using ‘onBeforeViewChange’ event.
relevant code:
var subrowHeight = 25;
function getSectionEvents(sectionId) {
var state = scheduler.getState();
var sectionProperty = scheduler.getView().y_property;
return scheduler.getEvents(state.min_date, state.max_date).filter(function (ev) {
return ev[sectionProperty] == sectionId;
}).sort(function (a, b) {
if (a.start_date.valueOf() == b.start_date.valueOf())
return a.id > b.id ? 1 : -1;
return a.start_date > b.start_date ? 1 : -1;
});
}
function getSection(sectionId) {
return scheduler.serverList("rooms").find(function (section) {
return section.key == sectionId;
});
}
scheduler.createTimelineView({
name: "timeline",
x_unit: "minute",
x_date: "%H:%i",
x_step: 30,
x_size: 24,
x_start: 16,
x_length: 48,
y_unit: scheduler.serverList("rooms"),
y_property: "room_id",
render: "bar",
dx: 200,
getEventTop: function (event) {
var sectionEvents = getSectionEvents(event.room_id);
var index = 0;
for (var i = 0; i < sectionEvents.length; i++) {
if (sectionEvents[i].id == event.id) {
index = i;
break;
}
}
var eventHeight = index * subrowHeight;
var section = getSection(event.room_id);
return Math.min(eventHeight, section.height - subrowHeight - 1);
},
getEventHeight: function (event) {
return subrowHeight - 2;
},
getSectionHeight: function (section) {
var eventCount = getSectionEvents(section.key).length || 1;
return eventCount * subrowHeight;
},
});
// as of v6.0.0 `timeline.getSectionHeight` works incorrectly, internal issue code: GS-1862
// need workaround in onBeforeViewChange to set custom dynamic height for sections
scheduler.attachEvent("onBeforeViewChange", function (old_mode, old_date, mode, date) {
if (scheduler.getView(mode) && scheduler.getView(mode).y_unit) {
var timeline = scheduler.getView(mode);
var sections = timeline.y_unit;
var minDate = new Date(scheduler.date[`${mode}_start`](date));
var maxDate = scheduler.date.add(minDate, 1, mode);
sections.forEach(function (section) {
var sectionProperty = timeline.y_property;
var sectionEvents = scheduler.getEvents(minDate, maxDate).filter(function (ev) {
return ev[sectionProperty] == section.key;
});
var eventCount = sectionEvents.length || 1;
section.height = eventCount * subrowHeight + 1;
console.log(section);
});
}
return true;
});
// redraw scheduler after event modified in order to readjust heights of sections
function repaintOnUpdate() {
requestAnimationFrame(function () {
scheduler.render();
});
}
scheduler.attachEvent("onEventAdded", repaintOnUpdate);
scheduler.attachEvent("onEventChanged", repaintOnUpdate);
scheduler.attachEvent("onEventDeleted", repaintOnUpdate);
// end workaround