I'm using scheduler.module.js from React and would like to use a custom event layout extending the Stack one. Currently I didn't really find the proper way to do that, that the reason I'm looking for help...
The current way:
import { Scheduler, SchedulerEventRendering } from '@bryntum/scheduler';
// NOTE: HorizontalLayoutStack is not exported
const HorizontalLayoutStack = SchedulerEventRendering().defaultConfig.horizontalLayoutStackClass;
class MyHorizontalLayout extends HorizontalLayoutStack {
// ...
}
class MyScheduler extends Scheduler {
construct(config = {}) {
super.construct(config);
this.horizontalLayoutStackClass = MyHorizontalLayout;
}
}
What would be the proper way to use custom event layout?
Thanks
We have multiple type of events inside one resource and we're displaying them in separate bands inside this one resource with custom type of stacking.
That's the reason we needed custom layout; and it's great you have this class system and we can easily create a custom layout, however we can't apply them that easily... (also extending is not that easy, since this class is not exported from the module)
It looks like you found a way to override the stack layout class. So in order to split events to different bands by type you can override findClosestSuccessor. This method iterates over the events and looks for event to put next to the right from the current one. You can do smth like:
class MyHorizontalLayout extends HorizontalLayoutStack {
findClosestSuccessor(eventRenderData, events) {
const
eventEnd = eventRenderData.endMS,
isMilestone = eventRenderData.eventRecord && eventRenderData.eventRecord.duration === 0,
eventType = eventRenderData.eventRecord.eventType;
let minGap = Infinity,
closest,
gap,
event;
for (let i = 0, l = events.length; i < l; i++) {
event = events[i];
gap = event.startMS - eventEnd;
if (
gap >= 0 && gap < minGap &&
eventType === event.eventRecord.eventType &&
// Two milestones should not overlap
(gap > 0 || event.endMS - event.startMS > 0 || !isMilestone)
) {
closest = i;
minGap = gap;
}
}
return closest;
}
}
You can also check this forum post which sheds some light on current eventlayout implementation: viewtopic.php?p=88349#p88349
This feature is implemented in the upcoming scheduler pro 4.3.0 release. You can take control over event rendering manually positioning them inside the row with eventLayout config.
I see #3315 and #1854 are closed/fixed, but I'm not sure how to set the my own "MyHorizontalLayout" class (extends HorizontalLayoutStack) as eventLayout. Could you please give me a hint?
As well it seems "HorizontalLayoutStack" class is still not exported from the module, thus it's a bit harder to extend.
